tailwind css 生产环境样式丢失主因是 content 配置未覆盖所有含类名的文件路径，或动态 class 未加入 safelist，或 @apply 未在 @layer 中声明。
生产环境打包后 Tailwind CSS 样式丢失，基本可以断定是 content 配置没覆盖到你写类名的地方——Tailwind v3+ 不猜、不推、不执行 JS，只按你写的路径去硬盘上硬扫源码字符串，漏一个文件，对应类就进回收站。
content 路径没写全或写错格式
Tailwind 只认 content 数组里明确列出的 glob 字符串，且对大小写、斜杠方向、通配符层级极其敏感。写错一个字符，整片目录就扫不到。
-
./src/**/*.{js,ts}→ 漏了.tsx和.vue，React/Vue 组件里的bg-blue-500全部消失 -
src/**/*→ 缺少扩展名，Tailwind 直接忽略，等同于没配 -
./public/index.html没加进content→ 里面写的class="text-center"被当死代码删 - 用了 MDX、Astro 或 Svelte？必须显式加上
.mdx、.astro、.svelte - Windows 下建议统一用
/分隔路径；含空格的路径，每个--content值要用双引号包裹，比如--content "./src/**/*.{ts,tsx}"
动态 class 名没进 safelist
Tailwind 不执行 JS，只匹配源码中出现的字面量字符串。像 className={`text-${color}-500`} 这种写法，源码里根本没出现完整类名，PurgeCSS 看不见，直接删。
- 简单场景：硬编码
safelist: ['bg-red-500', 'text-blue-600'] - 多变体推荐正则：
{ pattern: /text-(red|blue|green)-(500|600)/ } - 响应式前缀要显式包含：
/^(md|lg):text-(red|blue)-500$/，只写text-red-500会漏掉md:text-red-500 - 避免
.*结尾：/text-.*/会意外匹配text-clip这类原生 CSS 属性
@apply 写在裸 CSS 规则里被跳过
Tailwind 的扫描器无法建立“这个 CSS 规则用了哪些工具类”的关联。如果你把 @apply 写在未声明层级的裸规则里，它就当这些工具类没被用过，直接删掉。
- 错误写法：
.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放组件样式——它专为工具类扩展设计，顺序和作用域都不同
构建命令漏传 --content 或路径错位
如果你没走框架封装（如 Vite/Next.js 插件），而是直接调用 tailwindcss CLI，那 --content 参数必须手动传，且路径必须和 tailwind.config.js 中一致。
- 漏传
--content→ Tailwind 默认只扫./src/**/*.{html,js,ts}，大概率不匹配你的项目结构 - 路径错位：比如配置里写
src/**/*，但 CLI 执行时当前目录不在项目根，或 config 文件实际在config/tailwind.config.js，却没调整相对路径 - 验证方法：运行
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/test.css -c ./tailwind.config.js，看输出是否含你预期的类名
最常被忽略的一点：开发环境正常 ≠ 生产构建没问题。开发服务器是 JIT 实时生成，不依赖 content 扫描结果；而 npm run build 才真正触发 Purge 流程。别跳过这一步验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
