生产环境样式丢失主因是content配置未覆盖所有含类名文件；需显式列出TSX、JSX、HTML、Vue等全部扩展名路径，动态类加safelist，@apply须置入@layer components，第三方库路径手动加入content，并重启服务。
生产环境构建后 Tailwind CSS 样式丢失，基本就是 content 配置没扫到你写类的地方——Tailwind 不执行 JS、不解析变量、不猜路径，它只按你写的 glob 字符串去硬盘上硬匹配源码文本。漏一个文件或扩展名，对应类就进不了最终 CSS。
content 数组漏了真实类名所在文件路径
Tailwind v3+ 完全依赖 content 字段扫描源码字符串，不再自动推导、不读 import、也不处理运行时拼接的类名。漏配 = 直接删除。
- 写了
"./src/**/*.{js,ts}"却没加tsx或jsx？React 组件里的bg-blue-500全部消失 -
public/index.html里硬写的class="md:px-8"必须显式加入content，否则被当“死代码”删掉 - 用了
.mdx、.vue、.svelte？对应扩展名一个都不能少 - 路径含空格或中文时，每个
--content值必须用双引号包裹，否则 CLI 直接跳过 - Windows 下建议统一用
/分隔路径，避免\被转义
动态拼接的类名（如 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-blue-500会漏掉md:bg-blue-500 - 避免
.*结尾：/bg-.*/会误抓bg-clip这类原生属性，引入冗余样式
@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、Flowbite）的类名没进 content
如果你是直接 npm install daisyui 并在 tailwind.config.js 里启用插件，但它的组件源码（比如 node_modules/daisyui/dist/**/*.js）不在你的 content 列表里，那它内部用的 btn-primary、card-body 等自定义类照样被 PurgeCSS 删掉。
- 手动加进
content数组："./node_modules/daisyui/dist/**/*.js" - 路径必须和磁盘上实际结构完全一致；大小写、斜杠方向、通配符层级错一个，整片目录就扫不到
- raw-loader 加载的 HTML 文件（如
header.html）也得列进去，否则其中的类名不会被识别 - 修改完
content或safelist后，务必重启构建服务——Node.js 缓存模块，不重启配置不生效
最常被忽略的一点：safelist 再全也救不了 content 漏配。content 是第一道门，safelist 是补漏的网——门没开，网再密也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
