Create React App项目部署Netlify后Tailwind CSS样式丢失求助

问题根因及修复方案 #

1. 构建命令配置错误 #

你项目使用@craco/craco适配Tailwind CSS的PostCSS配置，但package.json中的build命令仍使用原生react-scripts build，未走craco配置流程，导致生产构建时Tailwind样式没有被编译注入。
修复方式：将package.json的scripts.build字段修改为：

"build": "CI= craco build"

2. Tailwind purge路径配置错误 #

tailwindcss.config.js里的purge第一个路径写为/public/*.html，开头的根路径符会导致生产构建时无法正确匹配项目public目录下的HTML文件，Tailwind会误判所有样式都未被使用，在tree shaking阶段将全部样式清除。
修复方式：修改purge配置为：

purge: [
  './public/*.html',
  './src/**/*.{jsx,js}'
]

补充：原有路径仅匹配了src/components下的文件，如果你在src其他目录的页面、逻辑文件中也用到Tailwind类名，建议扩大匹配范围到整个src目录，避免样式被误删

3. 可选校验项 #

确认项目根目录下的craco.config.js已经正确配置Tailwind和PostCSS插件，参考配置如下：

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

修改以上配置后重新提交代码触发Netlify构建即可恢复正常样式。

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