错误：PostCSS 插件 tailwindcss 需要 PostCSS 8（更新 v2 到 v3）

Posted 2023-03-07

【中文标题】错误：PostCSS 插件 tailwindcss 需要 PostCSS 8（更新 v2 到 v3）

【英文标题】：Error: PostCSS plugin tailwindcss requires PostCSS 8(update v2 to v3)

【发布时间】：2022-01-17 18:19:33

【问题描述】：

我正在尝试将 tailwindcss v2 更新到 v3（我正在使用 ReactJs）。我已经安装了最新版本的 autoprefixer、tailwindcss 和 postcss。 这是错误：

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) 错误： PostCSS 插件 tailwindcss 需要 PostCSS 8. 迁移指南 对于最终用户： https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

这些是我的依赖项：

"dependencies": 
    "@babel/core": "^7.13.0",
    "@craco/craco": "^6.4.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.11",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "autoprefixer": "^10.0.2",
    "postcss": "^8.4.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-player": "^2.9.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "react-youtube": "^7.13.1",
    "tailwindcss": "^3.0.2",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  ,

【问题讨论】：

您是否尝试过从 node_modules 中完全删除 PostCSS 并重新安装？

@kluvin 是的，同样的问题。我忘了把完整的错误：./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/ src??postcss!./src/index.css) 错误：PostCSS 插件 tailwindcss 需要 PostCSS 8。最终用户迁移指南：github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

【参考方案1】：

您正在将 Tailwind 与依赖于旧版 PostCSS 的工具集成。你可以使用这个文档https://tailwindcss.com/docs/installation#post-css-8-compatibility-build

如果这不起作用，试试这个 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

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