Create-React-App项目集成TailwindCSS报PostCSS 8依赖错误如何解决？

你遇到的问题核心是旧版create-react-app内置PostCSS 7，与不同版本Tailwind要求的PostCSS版本不兼容，两种解决方案如下：

方案1：保留PostCSS 7兼容版本（无需升级CRA） #

该方案适配旧版CRA的内置依赖，无需大版本改动：

• 先卸载已安装的高版本依赖，回退到PostCSS 7兼容套件：

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

• 执行CSS构建时调用项目本地的Tailwind指令，避免调用全局版本导致的版本不匹配：

npx tailwindcss build -i src/app/styles/tailwind.css -o src/app/styles/base.css

• 无需配置craco，直接使用原有npm start指令启动项目即可，构建和启动流程均可正常运行。

方案2：升级到支持PostCSS 8的新版CRA，使用最新版Tailwind #

如果需要使用Tailwind新特性，可以升级CRA版本适配PostCSS 8：

• 卸载旧版react-scripts，安装支持PostCSS 8的新版react-scripts：

npm uninstall react-scripts
npm install react-scripts@latest

• 安装最新版Tailwind相关依赖：

npm install tailwindcss@latest postcss@latest autoprefixer@latest

• 保留原有craco.config.js配置，删除项目根目录下的node_modules文件夹和package-lock.json文件，重新执行依赖安装：

npm install

• 之后执行npm run craco start启动项目、执行Tailwind构建命令均可正常运行。

特殊情况处理 #

如果调整后仍出现react-widgets相关的PostCSS报错，可在项目根目录新增postcss.config.js文件，排除该依赖的样式处理：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  exclude: ['node_modules/react-widgets/**/*']
}

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