在没有 Vite 的情况下，在 Vue 3 (v3.2.10) 中安装 Tailwind CSS 时出现 PostCSS 8 错误（支持 PostCSS 8）

Question

我正在使用没有 Vite 的Vue版本 3.2.10 并尝试安装Tailwind CSS版本2.2.14 (最新)。

重要提示：Vue 版本 3.0.6 开始支持 PostCSS 8（有关更新，请参阅 GitHub 文档中的“功能”下的第 3 点）

仔细遵循安装说明后，然后运行npm run serve我不断收到此错误：

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

这是我的 package.json 文件：

"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"
  }

如上所述，Vue 3.0.6 及更高版本肯定支持 PostCSS 8。此外，“ PostCSS 7 兼容性构​​建”的 Tailwind CSS 说明不起作用。

按照这些说明操作后，我收到此错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: postcss@7.0.36
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"^7" from the root project
npm ERR!   postcss@"^7.0.32" from autoprefixer@9.8.6
npm ERR!   node_modules/autoprefixer
npm ERR!     dev autoprefixer@"^9" from the root project
npm ERR!     autoprefixer@"^9.8.6" from @vue/cli-service@4.5.13
npm ERR!     node_modules/@vue/cli-service
npm ERR!       peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.13
npm ERR!       node_modules/@vue/cli-plugin-babel
npm ERR!         dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR!       3 more (@vue/cli-plugin-router, @vue/cli-plugin-vuex, the root project)
npm ERR!     1 more (tailwindcss)
npm ERR!   42 more (@intervolga/optimize-cssnano-plugin, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.0.0" from postcss-cli@8.3.1
npm ERR! node_modules/postcss-cli
npm ERR!   dev postcss-cli@"^8.3.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/mgav/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mgav/.npm/_logs/2021-09-08T21_09_08_052Z-debug.log

感谢您的帮助！

Answer 1

看来问题（在某些情况下，无论如何）与 VueJS 没有直接关系，而是与 vue-cli 相关。

对我有用的解决方案是：

1. 将 @vue/cli 更新为“^5.0.0-beta.3”（位于“~4.5.0”）-（链接到 npm 上的链接）
2. 将 @vue/compiler 更新到最新的稳定版本 - （链接到该版本 - 现在 3.2.11 - 在 npm 上）
3. 即使我没有使用 postcss7-compat 版本，我还是按照帖子的说明通过卸载npm uninstall tailwindcss @tailwindcss/postcss7-compat
4. 通过重新安装最新版本的 TailwindCSS、PostCSS 和 AutoPrefixernpm install tailwindcss@latest postcss@latest autoprefixer@latest

就是这样！

注意：这不是我的作品。Lindsay Wardell (@lindsaykwardell)指导我在这个 Vuejs 论坛上发表了一篇帖子，其中包含Thomas Castelly的解决方案（也没有 StackOverflow 句柄）。