vue-cliでVue3にTailwindcss2を導入しようとしてPostcss8が必要だと警告が出た場合の解決方法

結論から言うとvue-cliのバージョンを5.0.0-alpha.5以上にあげましょう。

2021年4月23日現在、vue-cliをインストールし、Vueプロジェクトを作成した上で、tailwindcssを公式に従って追加するとPostcss8が必要ですと怒られます。

上記のリンクではCreating your projectでviteを使用していますが、Vue-Cliから作成のは以下の通りです。

vue-cliをインストール

yarn global add @vue/cli

Vueプロジェクトを作成

vue create hello-world
cd hello-world

tailwindcssをインストール

yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev

configuration filesを作る

npx tailwindcss init -p

以下２ファイルを修正

// tailwind.config.js
  module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

以下作成

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

これでbuildすればいける！と思います。いけません。
Postcss8が必要だと怒られます。package.jsonにはPostcssのバージョンが8になっているし・・・

ネットの海で漂流を続けた結果、以下の情報にたどりつきました。

forum.vuejs.org

vue-cliのバージョン情報
vue-cli/CHANGELOG.md at dev · vuejs/vue-cli · GitHub

最新版は5.0.0-alpha.8だったのでこれに上げます。

vue upgrade --to 5.0.0-alpha.8 @vue/cli-service
vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-babel     
vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-eslint  
vue upgrade --to 5.0.0-alpha.8 @vue/cli-plugin-router

これで無事ビルドが通りました。