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这类原生属性，引入冗余样式
@apply 没套 @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
如果你以源码形式引用了第三方 UI 库（比如 node_modules/daisyui/dist/**/*.js），它的内部类名（如 btn-primary）同样需要被 Tailwind 扫描到，否则照样被 PurgeCSS 删掉。
- 手动加路径进
content，例如："./node_modules/daisyui/dist/**/*.js" - 路径必须和磁盘上实际结构完全一致；Windows 下建议统一用
/分隔，避免\被转义 - 某些构建工具（如 Vite/Next.js 插件）会自动注入
content，但一旦你手动调用tailwindcss -i ... -o ...，就得自己传--content参数，漏传等于白配
最常被忽略的是：改完 tailwind.config.js 后不重启开发服务器，或者构建命令里没同步更新 --content 参数——这两处不动，前面所有配置都白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
