Tailwind CSS 颜色类不生效的常见原因与解决方案

Tailwind 的 utility 类（如 text-red-600）未生效，通常是因为配置中的 content 路径未覆盖实际使用类名的 HTML 文件，导致 PurgeCSS（或新版本的 content-aware engine）跳过扫描，最终生成的 CSS 中缺失对应样式规则。

tailwind 的 utility 类（如 `text-red-600`）未生效，通常是因为配置中的 `content` 路径未覆盖实际使用类名的 html 文件，导致 purgecss（或新版本的 content-aware engine）跳过扫描，最终生成的 css 中缺失对应样式规则。

Tailwind CSS 默认采用 按需生成（just-in-time 或 content-aware purging） 策略：它不会将全部 10,000+ 个工具类无差别输出到 CSS 中，而是仅扫描 content 配置项所指定路径下的文件源码，提取其中出现的类名，再生成对应的 CSS 规则。这意味着：即使你在 index.html 中写了 class="text-red-600"，若该文件未被 tailwind.config.js 的 content 字段包含，Tailwind 就“看不见”这个类，自然不会生成 .text-red-600 { color: #dc2626; } 这样的声明。

在你的项目结构中：

• public/index.html 是实际使用 Tailwind 类的入口文件；
• 但 tailwind.config.js 的 content 仅配置为 ["./src/**/*.{html,js}"]，未包含 public/index.html；
• 因此，text-red-600 被忽略，生成的 public/styles.css 中不包含该颜色规则，页面渲染时样式失效。

✅ 正确做法是显式将所有含 Tailwind 类的模板/HTML 文件纳入 content：

// tailwind.config.jsmodule.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 验证问题（不推荐长期使用）：

  module.exports = {  content: ["./src/**/*.{html,js}"],  safelist: ["text-red-600"], // 强制保留该类（仅用于调试）  // ...}

? 总结：Tailwind 不是“导入预设 CSS”，而是“基于源码内容智能生成 CSS”。确保 content 准确覆盖所有使用 class 属性的文件，是让任意工具类（包括颜色、间距、阴影等）正常工作的前提。这是 Tailwind 区别于传统 CSS 框架的核心机制，也是高效构建的关键设计。