tailwind生产环境样式消失主因是content路径未配全，需确保tailwind.config.js的content数组覆盖所有含class的文件（如.tsx、.vue、.html），第三方库需手动添加，动态class须进safelist，cli构建要显式传--content参数，@apply必须置于@layer components内。
Tailwind 生产环境样式消失，90% 是 content 路径没配全，不是配置错、不是写法错、更不是 Tailwind 有 bug —— 它压根没读到你写的 class 字符串。
检查 tailwind.config.js 的 content 数组是否覆盖所有含 class 的文件
Tailwind v3+ 不解析 JS、不执行模板、不递归 import，只按 content 里写的 glob 字符串去硬盘上硬扫源码文本。漏一个后缀或目录，对应类就进不了最终 CSS。
- 写了
"./src/**/*.{js,ts}"，但组件是.tsx或.vue？必须显式加上："./src/**/*.{js,jsx,ts,tsx,vue}" - 用了
public/index.html写静态 class？得加进："./public/**/*.html" - 第三方 UI 库（如 DaisyUI）以源码形式放在
node_modules里？手动列进去："./node_modules/daisyui/dist/**/*.js" - 路径大小写、斜杠方向、
**层级必须和磁盘上完全一致；Windows 下统一用/更稳
动态拼接的 class 名必须进 safelist，否则 PurgeCSS 看不见
className={`text-${color}-500`} 这种写法，源码里根本不存在完整字符串 text-blue-500，PurgeCSS 只认字面量，不执行 JS。
- 简单场景：硬编码
safelist: ['text-blue-500', 'bg-red-600'] - 枚举有限：用对象预定义
const textClasses = { primary: 'text-blue-500', danger: 'text-red-500' }，再className={textClasses[color]} - 必须用正则？写成
/^text-[a-z]+-500$/（注意斜杠包裹，不是字符串），并显式包含响应式前缀：/^(md|lg):text-(red|blue)-500$/ - 避免
.*结尾：/text-.*/会意外匹配原生text-clip属性
构建命令漏传 --content，CLI 根本不扫你的代码
如果你没走 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+ 已弃用，留着反而干扰 JIT
@apply 必须放在 @layer components 块内，否则生产环境整块被删
开发环境正常、生产环境消失，大概率是你把 @apply 写在了裸 CSS 规则里，没声明层级。Tailwind 扫描器无法建立“这个规则用了哪些工具类”的关联，直接当它没被用过，整块删掉。
- 错误写法：
.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放组件样式 —— 它专为工具类扩展设计，顺序和作用域都不同
最常被忽略的一点：PurgeCSS 匹配的是源码字符串，不是运行时 DOM。哪怕你在 JS 里 el.className = 'text-red-500'，只要这行字符串没出现在 content 扫描到的文件里，它就不会进 CSS —— 没有魔法，只有显式声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
