tailwind生产环境类失效主因是content配置未覆盖实际使用类的文件路径；需确保glob路径完整包含所有扩展名与目录、动态类名加safelist、@apply须置于@layer components内、第三方库路径手动加入content，并重启服务清除缓存。
生产环境打包后部分 Tailwind CSS 类失效，基本就是 content 配置没扫到你实际写类的地方——Tailwind 不执行 JS、不解析变量、不猜路径，它只按你写的 glob 字符串去硬盘上硬匹配源码文本。
tailwind.config.js 的 content 路径漏了文件类型或目录
Tailwind v3+ 完全依赖 content 数组扫描原始字符串，漏一个扩展名或子目录，对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}"却没加tsx或jsx？React 组件里的bg-my-blue全部消失 - Next.js App Router 项目漏了
"./app/**/*.{js,ts,jsx,tsx}"，layout.tsx里写的text-my-red就不会生成 -
public/index.html里硬写的class="md:px-8"，必须显式加进content，否则被当“死代码”删掉 - 用了
.mdx、.vue、.svelte？对应扩展名一个都不能少 - 路径含空格或中文时，CLI 构建中每个
--content值必须用双引号包裹，否则直接跳过
动态拼接的类名（如 className={`bg-${color}-500`}）根本没被扫描到
PurgeCSS 只认源码里真实存在的字面量字符串，bg-${color}-500 在 JS 文件里只是个模板，运行时才拼出完整类名，构建阶段压根看不到。
- 简单固定值：在
tailwind.config.js的safelist里硬写['bg-blue-500', 'text-red-600'] - 多变体推荐正则：
{ pattern: /bg-(blue|red|green)-(500|600)/ }，注意响应式前缀要显式包含，比如/^(md|lg):bg-blue-500$/ - 避免
.*结尾：/bg-.*/会误抓bg-clip这类原生属性，引入冗余样式 - 函数式写法更可控：
safelist: [{ pattern: /text-(red|blue)-(500|600)/ }]
@apply 写在裸 CSS 规则里，没套 @layer components
开发环境看着正常，一打包就失效，大概率是你把 @apply 直接写在了没声明层级的规则里。Tailwind 扫描器无法关联“这个 CSS 规则用了哪些工具类”，就当它们没被用过。
- 错误写法：
.btn-primary { @apply px-4 py-2 bg-blue-600; } - 正确写法：
@layer components { .btn-primary { @apply px-4 py-2 bg-blue-600; } } -
@layer components必须放在@tailwind components之后，且整个块应置于主 CSS 文件（如globals.css）中 - 别用
@layer utilities放组件样式——它专为扩展工具类设计，顺序和作用域都不对
第三方库（如 DaisyUI）内部用了自定义类，但它的源码路径没进 content
Tailwind 默认不扫描 node_modules，哪怕你 import { Button } from 'daisyui'，它也不会看 node_modules/daisyui/dist/ 里写了啥类。
- 确认该库是否发布源码：查
node_modules/daisyui/package.json的exports或main字段，常见路径如./node_modules/daisyui/dist/**/*.js - 路径必须以
./开头，不能写node_modules/，否则 Tailwind 静默忽略 - 后缀要匹配真实文件类型：
.js、.ts、.jsx，漏掉就扫不到 - 改完配置必须重启开发服务，缓存不自动更新；可临时加个
bg-[#abc]测试是否重扫生效
最常被忽略的一点是：改完 tailwind.config.js 后，Vite 或 Next.js 开发服务器不会自动重读配置，必须手动 Ctrl+C 停掉再重启——否则你以为配好了，其实还在用旧缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
