Vue 3 (v3.2.10) に Tailwind CSS をインストールする際の PostCSS 8 エラーを解決します (Vite 以外、PostCSS 8 をサポート)

Question

<p>私は Vue バージョン 3.2.10 を使用しています。Vite は使用していません</strong>gt; で、Tailwind CSS バージョン 2.2.14 (最新バージョン) をインストールしようとしています。 </p> <p><strong>重要: Vue は、バージョン 3.0.6 以降で PostCSS 8 をサポートします</strong> (GitHub ドキュメントの「機能」の更新されたポイント 3 を参照してください)。 </p> <p>インストール手順に注意深く従った後、<code>npm runserve</code> を実行すると、次のエラーが発生し続けます。 </p> <pre class="brush:php;toolbar:false;">./src/assets/main.css のエラー 構文エラー: エラー: PostCSS プラグイン tailwindcss には PostCSS 8 が必要です。 エンドユーザー向けの移行ガイド: https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users</pre> <p>これは私の package.json ファイルです: </p> <pre class="brush:php;toolbar:false;">"スクリプト": { "serve": "vue-cli-service サーブ", "ビルド": "vue-cli-service ビルド" }、 "依存関係": { "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-normal-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/vue-fontawesome": "^3.0.0-4", "@headlessui/vue": "^1.4.1", "core-js": "^3.6.5", "date-fns": "^2.23.0", "ファイアベース": "^8.9.0", "vue": "^3.0.0", "vue-ルーター": "^4.0.0-0" }、 "devDependency": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0", "オートプレフィクサー": "^10.3.4", "postcss": "^8.3.6", "postcss-cli": "^8.3.1", "tailwindcss": "^2.2.14" }</pre> <p>上で述べたように、Vue 3.0.6 以降は PostCSS 8 を確実にサポートします。さらに、Tailwind CSS の「<em>PostCSS 7 互換ビルド</em>」の説明は機能しません。</p> <p>これらの説明に従って、次の説明に到達しました。</p> <pre class="brush:php;toolbar:false;">npm エラー!コード ERESOLVE npmエラー! ERESOLVE が依存関係ツリーを解決できません npmエラー! npmエラー!見つかりました: postcss@7.0.36 npmエラー!ノードモジュール/postcss npmエラー!ルート プロジェクトからの dev postcss@"^7" npmエラー! postcss@"^7.0.32" から autoprefixer@9.8.6 npmエラー!ノードモジュール/オートプレフィクサー npmエラー!ルート プロジェクトからの dev autoprefixer@"^9" npmエラー! autoprefixer@"^9.8.6" (@vue/cli-service@4.5.13 から) npmエラー!ノードモジュール/@vue/cli-service npmエラー!ピア @vue/cli-service@"^3.0.0 || ^4.0.0-0" (@vue/cli-plugin-babel@4.5.13 から) npmエラー! node_modules/@vue/cli-plugin-babel npmエラー!ルート プロジェクトの dev @vue/cli-plugin-babel@"~4.5.0" npmエラー!さらに 3 つ (@vue/cli-plugin-router、@vue/cli-plugin-vuex、ルート プロジェクト) npmエラー!さらに 1 つ (追い風) npmエラー!他 42 件 (@intervolga/optimize-cssnano-plugin, ...) npmエラー! npmエラー!依存関係を解決できませんでした: npmエラー!ピア postcss@"^8.0.0" (postcss-cli@8.3.1 から) npmエラー!ノードモジュール/postcss-cli npmエラー!ルート プロジェクトからの dev postcss-cli@"^8.3.1" npmエラー! npmエラー!上流の依存関係の競合を修正するか、再試行してください npmエラー!このコマンドには --force または --legacy-peer-deps を指定します npmエラー!間違った (そして壊れている可能性がある) 依存関係の解決を受け入れること。 npmエラー! npmエラー!完全なレポートについては、/Users/mgav/.npm/eresolve-report.txt を参照してください。 npmエラー!この実行の完全なログは、次の場所にあります。 npmエラー! /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log</pre> <p>感谢您のお手伝い！</p>

Answer 1

場合によっては、問題は VueJS に直接関係しているのではなく、vue-cli に関係していると思われます。

私にとってうまくいった解決策は次のとおりです:

1. @vue/cli を "^5.0.0-beta.3" (以前は "~4.5.0") に更新します - (npm のリンク )
2. @vue/compiler を最新の安定バージョンに更新します - (npm のリンク - 現在 3.2.11)
3. postcss7-compat バージョンを使用していませんが、投稿の指示に従って npm uninstall tailwindcss @tailwindcss/postcss7-compat を介してアンインストールしました。
4. npm install tailwindcss@latest postcss@latest autoprefixer@latest を使用して、TailwindCSS、PostCSS、および AutoPrefixer の最新バージョンを再インストールします。

＃＃＃それでおしまい！

注: これは私の仕事ではありません。私は Lindsay Wardell (@lindsaykwardell) によって Vuejs フォーラムの この投稿 に誘導されました。解決策は Thomas Castelly (StackOverflow アカウントを持っていません) によって提供されました。