npm 启动时出现 PostCSS 错误 "tailwindcss requires PostCSS 8"

Question

当 npm start.

时，我的项目不断出现错误 PostCSS plugin tailwindcss requires PostCSS 8

也是一样，不过现在老了，没什么用了。 PostCSS 8 现在应该与 Tailwind 和 CRA 兼容，所以我安装了最新版本但是 returns 同样的错误。我在这里被困了将近 3 天，所以如果有任何建议或意见，我将不胜感激！

我尝试过的（但从未奏效）：

已降级为 tailwindcss/postcss7-compat": "^2.2.17”、PostCSS ^7.0.39 和 autoprefixer": "^9.8.8
已升级到最新版本 tailwindcss:"^2.2.17"、autoprefixer:"^10.4.0" 和 PostCSS ^8.3.11
已升级 node v16.13.0、craco: "^6.4.0" 和 react-scripts:"^4.0.3"。
在启动脚本中添加了 --openssl-legacy-provider
已删除包-lock.json、yarn-lock.json、节点模块和npm install
多次重新启动 VScode 和浏览器。

{
  "dependencies": {
    "@craco/craco": "^6.4.0",
    "@heroicons/react": "^1.0.4",
    "@types/react-router-dom": "^5.1.8",
    "autoprefixer": "^10.4.0",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "cra-template-typescript": "1.1.2",
    "postcss": "^8.3.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-textarea-autosize": "^8.3.3",
    "react-transition-group": "^4.4.2",
    "router": "^1.3.5",
    "tailwindcss": "^2.2.17",
    "typescript": "^4.3.5",
    "yarn": "^1.22.17"
  },
  "scripts": {
    "build:tailwind": "tailwindcss build -i src/index.css -o src/index.css",
    "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

Answer 1

我在这上面花了很多时间，终于找到了解决方法。使用 tailwind CLI 而不是 postCSS 和 autoprefixer。关注 this doc。不要忘记从 craco.config.js 中删除 require('autoprefixer')。 PostCSS官方说PostCSS8现在兼容create-react-app，可惜不行。我看到很多人仍然和我有同样的问题，所以我希望这个答案能帮助到别人。

npm 启动时出现 PostCSS 错误 "tailwindcss requires PostCSS 8"

PostCSS error "tailwindcss requires PostCSS 8" when npm start

reactjs

create-react-app

tailwind-css

postcss

autoprefixer