在 npm run build 上出现错误（PostCSS 插件 postcss-purgecss 需要 PostCSS 8）vuejs3 和 tailwind答案

【问题标题】：Getting error on npm run build (PostCSS plugin postcss-purgecss requires PostCSS 8) vuejs3 and tailwind在 npm run build 上出现错误（PostCSS 插件 postcss-purgecss 需要 PostCSS 8）vuejs3 和 tailwind
【发布时间】：2021-06-09 09:32:09
【问题描述】：

我正在使用 vuejs3 和 tailwindcss 构建一个应用程序
我在开始项目之前测试了一些配置然后我得到了这个错误
npm run build 抛出：

ERROR  Failed to compile with 1 error                                2:48:15 PM

 error  in ./src/styles/index.css

Error: PostCSS plugin postcss-purgecss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


 @ ./src/main.js 9:0-28
 @ multi ./src/main.js

 ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-vue-env@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test-vue-env@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是我在package.json中的devDependencies：

{
    "devDependencies": {
        "@fullhuman/postcss-purgecss": "^4.0.0",
        "@fullhuman/vue-cli-plugin-purgecss": "~4.0.2",
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-plugin-router": "~4.5.0",
        "@vue/cli-plugin-vuex": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "autoprefixer": "^10.2.5",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-vue": "^7.0.0-0",
        "node-sass": "^5.0.0",
        "postcss": "^8.2.8",
        "prettier": "^1.19.1",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.0.3"
    }
}

感谢您的宝贵时间！

【问题讨论】：

这能回答你的问题吗？ Error: PostCSS plugin tailwindcss requires PostCSS 8
OP 没有列出反应。 create-react-app 是什么让你使用 postcss-7-compat 运行 postcss 7 和 tailwindcss。

标签： node.js vue.js npm tailwind-css postcss

【解决方案1】：

根据the official docs，你应该这样做：

npm uninstall tailwindcss postcss autoprefixer

然后

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

注意：为避免任何问题，您可以删除 package-lock.json 然后运行上面的命令。

【讨论】：

我知道你在说什么，但我的问题不在于tailwind 而在于postcss-purgecss 而我的postcss 版本是8
请分享您的 tailwind.config.js 文件
根据此处的 cmets github.com/tailwindlabs/tailwindcss/discussions/3575，您可能需要通过在每个实例之前添加 \ 来转义 ^，因此代码将为 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@\^7 autoprefixer@\^9

【解决方案2】：

这是因为目前 tailwind 不支持 postcss 版本 8（我说的是 tailwind compat）。您可以在 tailwind 的 official link 上找到更多相关信息。基本上它说，postcss 8 不受其他库的支持，因此，tailwind 使用 postcss7-compat 直到更多人开始使用 postcss 8。

【讨论】：

【解决方案3】：

OP 没有在依赖项中列出 react。这些文档链接涉及create-react-app，这使您可以在postcss-7-compat 版本中运行postcss@^7 和tailwindcss。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest 可以在 Vue 3 中很好地构建。

我建议你删除两个@fullman 包，杀死你的package.lock（假设使用npm 与yarn）和node_modules 文件夹并再次运行npm install。 postcss 和 tailwindcss 包将拉入正确的 postcss-purgecss 包。

如果您仍有问题，请发布您的顺风配置和构建器配置（webpack、rollup、gulp 等）。

【讨论】：