← 中文资源

简体中文版本

Tailwind CSS 生产构建中类缺失

Tailwind CSS 清除了动态构造或不在 content 配置文件中的类,导致生产环境缺失样式但开发环境正常。

阅读英文原文

症状分析

Tailwind CSS 清除了动态构造或不在 content 配置文件中的类,导致生产环境缺失样式但开发环境正常。 该错误在生产环境中出现,但可能不会在本地开发中复现,因为触发条件依赖于部署环境或运行时配置。理解完整的症状集合有助于将此问题与类似错误区分开来。

诊断实践

按照前置事项中的诊断步骤定位原因。每个步骤包含命令和输出解读。目标是缩小问题范围:配置、运行时还是应用代码。在最小化环境中复现错误后再应用修复。

根因

Tailwind CSS scans source files for class names at build time; dynamically constructed names or files outside the content paths are not detected and the classes are purged.

修复

Add all source file paths to the content array, use complete class names instead of interpolation, or add a safelist for dynamic classes. 应用修复后,监控系统以确认错误在负载下或不同环境中不再复现。

验证

Build for production and confirm the previously missing styles are present in the output CSS. 如果验证通过,修复即确认;如果未通过,重新检查诊断步骤中是否遗漏了促成因素。

诊断命令

运行以下命令复现和诊断问题:

cat tailwind.config.ts | grep -A10 content
grep -rn "bg-\${" src/