解决Vue 3（v3.2.10）中安装Tailwind CSS时的PostCSS 8错误（非Vite，支持PostCSS 8）
<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>
