Tailwind生产打包丢样式主因是content路径未配全——它仅按config中glob硬扫源码文本，漏文件类型或目录则对应class不生成；需显式添加tsx/vue/mdx等后缀、校验路径大小写与斜杠、动态class须safelist正则匹配、CLI需手动传--content、@apply须在@layer components内。
Tailwind 生产打包丢样式，90% 是 content 路径没配全 —— 它根本没读到你写的 class 字符串，不是压缩出错，也不是框架不兼容。
tailwind.config.js 的 content 数组漏了文件类型或目录
Tailwind v3+ 不解析 JS、不执行模板、不递归 import，只按 content 里写的 glob 字符串硬扫源码文本。漏一个后缀或目录，对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}"，但组件是.tsx或.vue？必须显式加上："./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class？得加进："./public/**/*.html" - 项目含 MDX、Astro、Svelte？对应后缀
.mdx、.astro、.svelte也要手动补上 - 路径大小写、斜杠方向、
**层级必须和磁盘上完全一致；Windows 下统一用/更稳
动态拼接的 class 名（如 className={`text-${color}-500`}）没进 safelist
PurgeCSS 只认源码里的字面量字符串，不执行 JS。text-blue-500 这个完整字符串如果没在源码中真实出现过，就会被删。
- 简单高频组合可硬编码：
safelist: ['text-red-500', 'bg-blue-600'] - 多变体推荐正则：
{ pattern: /text-(red|blue|green)-(500|600)/ }（注意用斜杠包裹，不是字符串） - 响应式前缀要显式包含：
/^(md|lg):text-(red|blue)-500$/，否则md:text-red-500会被漏掉 - 避免
/text-.*/这种宽泛写法 —— 会意外匹配原生text-clip属性
CLI 构建时没传 --content 参数，或路径没对齐配置文件
如果你没走 Vite/Next.js 插件链，而是直接调用 tailwindcss CLI，那命令里没写 --content 就等于没配 —— 它只会扫默认路径 ./src/**/*.{html,js,ts,jsx,tsx}，大概率漏掉你实际放组件的目录。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify（缺--content） - 正确做法：把
tailwind.config.js里content数组的内容，原样塞进命令，每个值单独双引号包裹：--content "./src/**/*.{js,jsx,ts,tsx}" --content "./public/**/*.html" - CI 构建时
pwd不是项目根目录？改用绝对路径：--content "$PWD/src/**/*.{js,ts}"（Bash） - 删掉所有残留的
TAILWIND_MODE=build环境变量 —— v3.3+ 已弃用，留着反而干扰
@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放组件样式 —— 它专为工具类扩展设计，顺序和作用域都不同
最容易被忽略的是：路径是否真能命中文件。建议用 npx tailwindcss --dry-run --content "./src/components/ui/**/*.{ts,tsx}" 快速验证 —— 它会打印出实际扫描到的文件列表，一眼就能看出是不是空的。
