React升级TailwindCSS v3遇PostCSS版本兼容错误

问题详情 #

升级TailwindCSS到v3版本时触发如下错误：

PostCSS plugin tailwindcss requires PostCSS 8

已执行以下操作但问题未解决：

npm uninstall tailwindcss postcss autoprefixer
npm i tailwindcss@latest postcss@latest autoprefixer@latest

当前package.json中PostCSS版本为8.4.21，满足版本要求但错误依旧。同时已尝试删除node_modules后重新执行npm i。

明确需求：不需要TailwindCSS v2兼容版本，必须使用TailwindCSS v3。

相关配置 #

package.json #

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@coreui/react-chartjs": "^2.1.0",
    "@craco/craco": "^6.2.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^1.3.4",
    "chart.js": "^4.0.1",
    "dayjs": "^1.11.7",
    "firebase-tools": "^9.23.3",
    "react": "^17.0.2",
    "react-chartjs-2": "^5.0.1",
    "react-circular-progressbar": "^2.1.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-device-detect": "^2.2.2",
    "react-dom": "^17.0.2",
    "react-loader-spinner": "^5.3.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-toastify": "^8.1.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.3.1"
  }
}

craco.config.js #

// craco.config.js
module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

解决方案 #

问题根源是react-scripts@4.0.3内置的PostCSS版本低于8，即便你手动安装了高版本PostCSS，Create React App仍会优先使用内置的旧版本。

方案一：升级react-scripts（推荐） #

升级到支持PostCSS 8的react-scripts v5及以上版本：

npm install react-scripts@latest

之后可删除node_modules和package-lock.json，重新执行npm i确保依赖对齐，再重启开发服务验证。

方案二：修改craco配置强制使用指定PostCSS版本 #

如果不想升级react-scripts，可修改craco.config.js，强制Craco使用你安装的PostCSS 8版本：

// craco.config.js
module.exports = {
  style: {
    postcss: {
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      },
    },
  },
}

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