部分带数字的Tailwind CSS类失效 求助排查及根因分析

核心机制层面的原因 #

Tailwind的JIT（即时编译）模式和传统模式的核心区别在于：

• JIT模式只生成扫描到的、实际被项目使用的样式类，以此极大减少最终CSS体积；
• 传统模式会生成全量的默认样式类，不管这些类是否被项目实际引用。

你遇到的问题本质是：JIT没有扫描到text-2xl/4xl/5xl/6xl/8xl/9xl、ml-1/2/3/4这些类的引用，所以对应的样式根本没被编译进output.css，浏览器自然找不到这些规则。

最可能的触发场景：content配置路径不匹配 #

你的tailwind.config.js中content字段配置为：

content: ["./src/**/*.{html,js}"]

这个配置限定JIT只能扫描src目录下所有子目录里的.html和.js文件。如果后续出现以下情况，就会导致JIT漏扫：

1. 使用失效类的HTML文件被移出了src目录（比如移到项目根目录）；
2. 新增的使用这些失效类的文件不在src路径范围内。

而你测试的text-7xl、ml-5能生效，是因为这些类在当前提供的src目录下的HTML文件里被明确引用了，所以JIT生成了对应的样式。

其他次要可能性 #

• JIT缓存异常：Tailwind会缓存扫描结果，若缓存未及时更新，可能导致新添加的类或移动后的文件未被重新扫描。但你删除自定义类后问题未改善，这个概率较低；
• 文件匹配规则遗漏：比如HTML文件扩展名是.htm而非.html，不过**已经匹配任意深度子目录，这种情况极少发生。

为什么关闭JIT模式能解决问题 #

关闭JIT模式后，Tailwind切换回全量编译逻辑，会生成所有默认的样式类，不管这些类有没有被项目实际引用，所以之前失效的类都能正常生效。

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