tailwind生产环境样式不生效，主因是content路径配置错误或遗漏——需显式列出所有含类名的文件路径（含扩展名）、修正glob写法、补充safelist动态类、确保构建命令传入content参数。
Tailwind 生产环境样式不生效，八成是 content 路径没配对——它不猜你写了啥，只按你写的 glob 字符串去硬盘上硬扫源码文本。
content 路径漏了真实类名所在文件
Tailwind v3+ 不解析 import、不执行 JS、不读取运行时拼的字符串，只扫描 content 数组里明确列出的路径下的原始文件内容。漏掉一个 .tsx 或 .vue 文件，里面写的 bg-blue-500 就直接进垃圾箱。
- 必须显式写全扩展名：
"./src/**/*.{js,jsx,ts,tsx,html,vue}"，不能只写.js以为能覆盖 JSX/TSX - 静态 HTML 模板（如
public/index.html）也要加进content，否则里面的class="text-center"会被当死代码删 - 用了 MDX、Astro、Svelte 组件？对应扩展名（
.mdx、.astro、.svelte）得手动补上 - 第三方 UI 库（如 DaisyUI、Flowbite）若以源码形式用在
node_modules里，其组件路径也得列进content，否则它们内部的btn-primary类照样消失
glob 写法错误导致路径根本没匹配到
Node.js 的 fast-glob 对路径大小写、斜杠方向、通配符层级极其敏感。写错一个字符，整片目录就扫不到。
-
**是递归匹配，*只匹配单层：写成"./src/*.{ts,tsx}"扫不到src/utils/helper.ts，得用"./src/**/*.{ts,tsx}" - Windows 下建议统一用
/分隔路径，避免\被转义；含空格的路径，每个--content值必须单独双引号包裹，比如--content "./pages/**/*.{js,ts}" --content "./components/**/*.{js,ts}" - 路径必须和磁盘上实际结构完全一致：项目里全是
.jsx，你却写.js，等于白配
动态 class 名没进 safelist，PurgeCSS 直接忽略
JSX 里 className={`p-4 ${isRed ? 'bg-red-500' : 'bg-gray-200'}`} 这种写法没问题，但 className={`from-${color}-500`} 中的 from-blue-500 整个字符串从未以字面量出现过，PurgeCSS 根本看不到。
- 简单场景可硬编码：
safelist: ['from-blue-500', 'from-green-600'] - 多变体推荐正则：
{ pattern: /from-(red|blue|green)-(500|600)/ }，注意响应式前缀要显式包含，如/^(md|lg):from-red-500$/ - 避免
.*结尾：/from-.*/会意外匹配原生 CSS 属性from-clip，引入冗余样式 - 函数式写法更可控：
safelist: [{ pattern: /text-(red|blue)-(500|600)/ }]
构建命令绕过配置文件，或传参方式错误
很多项目用自定义脚本调用 CLI，但忘了把 content 配置显式传进去——v3+ 不再自动读 tailwind.config.js 里的 content 字段，除非你命令里明说。
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把 config 里
content数组的内容，原样拆成多个--content参数，比如--content "./src/**/*.{js,tsx}" --content "./public/**/*.html" - CI 环境 pwd 不是项目根目录？改用绝对路径：
--content "$PWD/src/**/*.{js,tsx}"（Bash）或先cd到根再执行 - 删掉所有残留的
TAILWIND_MODE=build环境变量，v3.3+ 已弃用，反而干扰 JIT
最常被忽略的一点：PurgeCSS 匹配的是源码里“看得到”的字符串，不是浏览器里渲染出来的 DOM class。哪怕你在控制台看到 class="text-blue-500"，只要这个完整字符串没出现在任何被 content 扫到的源文件里，它就不会进最终 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
