React项目Netlify部署后TailwindCSS类不生效，是哪里配置错误？

问题根因及解决方案 #

你遇到的部署后Tailwind不生效是生产构建阶段的配置错误导致，本地开发环境Tailwind默认关闭样式清理（Purge）所以一切正常，Netlify执行生产构建时会触发Purge逻辑、且你构建脚本配置存在不一致，具体修复方案如下：

1. 修正Tailwind Purge匹配规则
   你当前的purge配置仅匹配src和src/components第一层目录下的文件，若你项目中存在更深层级的页面、组件文件，生产构建时会把这些文件里用到的Tailwind类当作未使用样式直接清理掉。
   将tailwind.config.js的purge配置替换为递归全匹配规则：

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx,scss,css}"],
  // 其余配置保持不变
}

**通配符会遍历src下所有层级的子文件夹，确保所有用到Tailwind类的文件都被扫描到。

2. 修正生产构建脚本
   你package.json里的start命令用的是craco start，但build命令还是默认的react-scripts build，如果你是通过CRACO集成Tailwind的话，生产构建也需要走CRACO才能加载对应的Tailwind处理配置。
   将scripts里的build配置修改为：

"build": "craco build"

3. 前置本地验证
   修改后先在本地执行npm run build，再用静态文件服务预览build文件夹的内容（可以用npx serve build命令快速启动预览），确认本地生产构建的样式已经正常，再推送至Netlify部署即可。

4. 额外排查项

• 确认项目入口文件（如src/index.js）已经正确引入了tailwind.output.css，且引入顺序晚于Bootstrap样式，避免样式优先级冲突
• 检查依赖列表中是否已经正确安装tailwindcss、postcss、autoprefixer，若缺失执行npm install -D tailwindcss postcss autoprefixer安装即可

内容的提问来源于stack exchange，提问作者Brad G.