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

【问题标题】：PostCSS 8 Error When Installing Tailwind CSS in Vue 3 (v3.2.10) without Vite (PostCSS 8 is supported)在没有 Vite 的 Vue 3 (v3.2.10) 中安装 Tailwind CSS 时出现 PostCSS 8 错误（支持 PostCSS 8）
【发布时间】：2021-11-05 14:56:39
【问题描述】：

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

重要提示：Vue 版本 3.0.6 开始支持 PostCSS 8（请参阅 GitHub documentation for the update 中的第 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 compatibility build”的 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

感谢您的帮助！

【问题讨论】：

标签： vue.js vuejs3 tailwind-css

【解决方案1】：

似乎问题（在某些情况下，无论如何）不是直接与 VueJS 相关，而是与 vue-cli 相关。

对我有用的解决方案是：

将@vue/cli 更新为“^5.0.0-beta.3”（在“~4.5.0”上）-(link to that on npm)
将@vue/compiler 更新为最新的稳定版 - (link to that - 3.2.11 right now - on npm)
即使我没有使用 postcss7-compat 版本，我还是按照帖子的说明通过npm uninstall tailwindcss @tailwindcss/postcss7-compat 卸载
通过npm install tailwindcss@latest postcss@latest autoprefixer@latest重新安装了最新版本的 TailwindCSS、PostCSS 和 AutoPrefixer

就是这样！

注意：这不是我的工作。我被Lindsay Wardell (@lindsaykwardell) 引导到a post on this Vuejs forum，并由Thomas Castelly 提供解决方案（也没有 StackOverflow 句柄）。

【讨论】：

【解决方案2】：

vue-cli（现在是 v4.5.13）的最新稳定包没有问题。

看起来你的问题更多是关于管理依赖关系（你应该阅读node.dev关于这个主题）基本上，使用 TailwindCSS 和最新的 Vue3 稳定版本只需要用很少的命令行安装最新版本的依赖项，它可以在没有盒子的情况下工作。

例如，您将在下面找到创建一个按原样工作的最小 Vue3/Tailwind 项目的说明：

$ vue create vue3-tailwindcss
$ cd vue3-tailwindcss
$ npm install -D @vue/compiler-sfc tailwindcss@latest postcss@latest autoprefixer@latest
$ npm run serve

node 和 Vue 的版本：

$ node --version
v16.5.0
$ vue --version
@vue/cli 4.5.13

关于您的问题，您可以使用以下方法使其与最新的稳定包一起使用：

在package.json 中进行这些更改：

"@vue/cli-service": "~4.5.0" => "@vue/cli-service": "^4.5.13"
"vue": "^3.0.0" => "vue": "^3.2.11"
"@vue/compiler-sfc": "^3.0.0" => "@vue/compiler-sfc": "^3.2.11"

然后删除文件package-lock.json 并运行npm install。

【讨论】：

谢谢@flydev。我已经超出了我的深度，不打算搞乱最终的工作。我会在这里等待答案，看看更有经验的用户怎么说。
我编辑了我的答案以进行澄清 - 没问题 - 等待“有经验的用户”:)

【解决方案3】：

没有 Vite 的简单解决方案。

您可以使用较新版本的 Vue CLI 启动新项目。只需像这样重新安装它：

npm uninstall -g @vue/cli
npm install -g @vue/cli@next

并创建一个新的 Vue 3 项目。它将毫无问题地支持 PostCSS 8。

然后关注Tailwind 3 installation guide using PostCSS。不要忘记在tailwind.config.js 中包含您的*.vue 文件。

你准备好了。

参考this repo I built。

【讨论】：