<p>我正在使用Vue版本3.2.10 <strong>沒有使用Vite</strong>，並嘗試安裝Tailwind CSS版本2.2.14（最新版本）。 </p>
<p><strong>重要提示：Vue版本3.0.6開始支援PostCSS 8</strong>（請參閱GitHub文件中的更新的第3點，位於「features」下）。 </p>
<p>在仔細遵循安裝說明後，執行<code>npm run serve</code>時，我一直收到以下錯誤：</p>
<pre class="brush:php;toolbar:false;">error in ./src/assets/main.css
Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users</pre>
<p>這是我的package.json檔案：</p>
<pre class="brush:php;toolbar:false;">"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-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",
"firebase": "^8.9.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@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",
"autoprefixer": "^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>
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 錯誤！ node_modules/@vue/cli-service
npm 錯誤！來自 @vue/cli-plugin-babel@4.5.13 的對等 @vue/cli-service@"^3.0.0 || ^4.0.0-0"
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 更多 (tailwindcss)
npm 錯誤！另外 42 個（@intervolga/optimize-cssnano-plugin，...）
npm 錯誤！
npm 錯誤！無法解決依賴關係：
npm 錯誤！來自 postcss-cli@8.3.1 的對等 postcss@"^8.0.0"
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
;
<p>謝謝您的幫忙！</p>
在某些情況下，問題似乎與VueJS直接無關，而是與vue-cli有關。
對我有效的解決方案是：
npm uninstall tailwindcss @tailwindcss/postcss7-compat卸載了它。npm install tailwindcss@latest postcss@latest autoprefixer@latest重新安裝最新版本的TailwindCSS，PostCSS和AutoPrefixer。就是這樣！
注意：這不是我的工作。我是由Lindsay Wardell (@lindsaykwardell)指導到Vuejs論壇上的這篇文章，其中的解決方案由Thomas Castelly（也沒有StackOverflow帳號）提供。