使用Create React App和TailwindCSS执行npm run build时编译失败求助

问题详情 #

执行npm run build时遭遇生产构建失败，错误信息如下：

创建优化生产构建...
编译失败。

static/css/main.a923260e.css from Css Minimizer plugin
/home/user/Documentos/coding/projects/todofeito app/client/static/css/main.a923260e.css:1882:43: Unknown word [webpack://./src/index.css:3,0][static/css/main.a923260e.css:1882,43]

项目依赖包含TailwindCSS ^3.1.8及tailwindcss-scoped-groups ^2.0.0，使用react-scripts 5.0.1构建。

排查与解决方案 #

1. 排查tailwindcss-scoped-groups插件问题 #

该插件可能生成了cssnano（默认CSS压缩工具）无法解析的非标准CSS语法：

• 临时禁用插件：在tailwind.config.js中移除tailwindcss-scoped-groups，重新执行npm run build。若编译成功，说明插件存在兼容性问题。
• 升级插件版本：执行npm update tailwindcss-scoped-groups更新至最新版本，再尝试构建。

2. 检查src/index.css语法 #

错误指向src/index.css第3行，直接查看该文件：

• 确认是否存在未闭合的括号、错误属性值、Tailwind指令误用等语法问题。
• 核对@scope等插件专属语法是否符合插件文档要求。

3. 调整CSS压缩工具配置 #

react-scripts 5内置的cssnano可能对某些语法兼容不佳：

• 通过package.json强制指定兼容版本（仅npm支持）：

"resolutions": {
  "cssnano": "^5.1.13"
}

执行npm install后重新构建。

4. 清理缓存重试 #

• 清理依赖缓存：

rm -rf node_modules package-lock.json
npm cache clean --force
npm install

• 清理React构建缓存：

npm run build -- --clean

重新执行npm run build。

5. 核对PostCSS配置 #

确保postcss.config.js中插件顺序正确：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

若使用postcss-normalize，需确保其位置不会干扰Tailwind编译流程。

内容的提问来源于stack exchange，提问作者undefined-mind