Tailwind CSS 的 utility 类（例如 text-red-600）无法正常生效，最常见的原因在于 tailwind.config.js 中的 content 配置路径未能覆盖实际使用该类名的 HTML 文件。这会导致 PurgeCSS（或新版 content-aware engine）跳过扫描，最终生成的 CSS 文件中缺少对应的样式规则。
先从最直接的诊断说起：当你在 HTML 中编写了 text-red-600，刷新页面后却发现颜色并未生效，不必怀疑其他原因，十有八九是 Tailwind 的 content 配置未能正确扫描到该文件。Tailwind 并非没有工作，而是根本没有被指示到那个文件路径下进行扫描。
Tailwind 采用了按需生成的设计理念——仅在最终输出的 CSS 中保留你实际使用的类名，而非一次性输出所有工具类。它通过扫描 content 路径下所有源文件，提取出现的类名来判断需要生成哪些样式。因此，逻辑很清晰：如果你的 index.html 中使用了 class="text-red-600"，但 tailwind.config.js 中的 content 字段并未将该文件纳入扫描范围，Tailwind 自然无法识别它，也就不会生成对应的 .text-red-600 { color: #dc2626; } 样式规则。这是最常见的导致 Tailwind 颜色类不生效的场景。
具体来看一个常见场景，假设你的项目结构如下：
- 实际页面入口为
public/index.html； - 但配置文件中的
content配置为["./src/**/*.{html,js}"]——该范围恰好排除了public/index.html； - 结果显而易见：
text-red-600被直接忽略，生成的public/styles.css中完全找不到对应的样式声明。
解决方案其实很简单——把真正写了 Tailwind 类的 HTML 或模板文件，全部显式地加入 content。例如，下面的配置中，只需添加一行指向 public/index.html 即可：
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./public/index.html" // ← 关键：添加这一行
],
theme: {
extend: {},
},
plugins: [],
}
这里有几个实操中容易踩的坑，值得单独提一下：
content的路径虽然使用 glob 模式，但必须指向你正在开发的源文件，而不是构建后的产物（例如dist/或public/中的已编译 HTML，除非你确实在那里直接编写类名）；- 若项目包含多个静态 HTML 文件，如
public/about.html、public/contact.html，可以逐个添加，或直接使用"./public/**/*.html"一次性匹配所有文件； - 修改
tailwind.config.js后，务必重新执行构建命令（例如npx tailwindcss -i src/styles.css -o public/styles.css --watch），否则新配置不会生效； - 如需快速验证问题，可临时启用
safelist选项，例如safelist: ["text-red-600"]，强制保留该类。但此方法仅适用于调试，不建议在生产环境中长期使用。
归根结底，Tailwind CSS 的核心思想并非“导入一套预设的 CSS”，而是“根据你代码中实际使用的类名，智能生成对应的 CSS”。只要确保 content 配置准确覆盖所有包含 class 属性的文件，那么颜色类、间距类、阴影类等都将正常生效。这正是 Tailwind 与传统 CSS 框架的根本区别，也是它能够实现轻量高效构建的关键设计。
