不使用Vite的Vue3.2.10项目安装Tailwind CSS报PostCSS8错误如何解决？

问题根因 #

你遇到的报错核心原因是**@vue/cli 4.5.x 版本内部默认内置了 PostCSS 7.x**，虽然 Vue 3.0.6+ 本身支持 PostCSS 8，但 vue-cli 4 的构建流程会优先调用自身内置的 PostCSS 版本，和你手动安装的 PostCSS 8 产生冲突。你尝试使用兼容包时报错，是因为你项目中安装的 postcss-cli@8.3.1 依赖 PostCSS 8，和 PostCSS 7 版本不兼容。

可行解决方案 #

方案1：升级 @vue/cli 到 5.x 版本（推荐） #

该方案可以完全适配 PostCSS 8，无需使用兼容包，后续升级依赖也不会出现版本冲突：

• 第一步：删除项目根目录下的 node_modules 文件夹、package-lock.json 文件，清除旧依赖缓存
• 第二步：卸载现有 PostCSS 相关依赖

npm uninstall tailwindcss postcss autoprefixer postcss-cli

• 第三步：升级项目内的 @vue/cli 相关依赖到 5.x 版本

npm install @vue/cli-service@5 @vue/cli-plugin-babel@5 @vue/cli-plugin-router@5 -D

• 第四步：重新安装 Tailwind CSS 及配套依赖

npm install tailwindcss postcss autoprefixer -D

• 第五步：执行 npm run serve 启动项目即可。

方案2：使用 PostCSS 7 兼容版本（无需升级 vue-cli） #

如果暂时不想升级脚手架版本，可以使用 Tailwind 官方提供的兼容包解决：

• 第一步：删除项目根目录下的 node_modules 文件夹、package-lock.json 文件
• 第二步：卸载所有现有 PostCSS 相关依赖，必须删除不兼容的 postcss-cli

npm uninstall tailwindcss postcss autoprefixer postcss-cli

• 第三步：安装 PostCSS 7 适配版本的依赖包

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 -D

• 第四步：执行 npm run serve 启动项目即可。

内容的提问来源于stack exchange，提问作者Mark Gavagan