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：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
// 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 验证问题（不推荐长期使用）：
module.exports = { content: ["./src/**/*.{html,js}"], safelist: ["text-red-600"], // 强制保留该类（仅用于调试） // ... }
? 总结：Tailwind 不是“导入预设 CSS”，而是“基于源码内容智能生成 CSS”。确保 content 准确覆盖所有使用 class 属性的文件，是让任意工具类（包括颜色、间距、阴影等）正常工作的前提。这是 Tailwind 区别于传统 CSS 框架的核心机制，也是高效构建的关键设计。
