tailwind v3+ 仅扫描 content 配置的路径，漏配扩展名、目录或大小写错误会导致类被丢弃；动态 class 需加入 safelist；@apply 必须置于 @layer components 中；cli 构建需显式传 --content 参数。
content路径没覆盖到实际写class的文件
Tailwind v3+ 不再猜你写了哪些类，只按 content 数组里写的 glob 路径去读源码字符串。漏一个扩展名、少一层目录、大小写不一致，对应文件里的 text-blue-500 就直接进不了最终 CSS。
-
./src/**/*.{js,ts}→ 漏了.tsx或.vue？React/Vue 组件全白写了 -
./public/index.html→ 但你写了./public/**/*.html才能匹配子目录下的 HTML - 第三方库（如 DaisyUI）的 class 在
node_modules里？得手动加./node_modules/daisyui/dist/**/*.js - Windows 下路径用反斜杠
\？统一改用/更稳，./src/components/*.tsx比.\src\components\*.tsx可靠
动态拼接的 class 没进 safelist
JSX 里 className={`p-${size} ${isRed ? 'text-red-500' : 'text-gray-400'}`} 这种写法，构建时只看到字面量 p- 和 text-red-500，但 p-4、text-gray-400 是运行时才确定的——PurgeCSS 不执行 JS，只认源码里“明明白白写着”的字符串。
- 枚举值有限？硬编码进
safelist：['p-4', 'p-6', 'text-red-500', 'text-gray-400'] - 取值范围明确？用正则：
{ pattern: /p-[468]|text-(red|gray)-[400500]/ } - 带响应式前缀？必须显式包含：
/^(md|lg):text-(red|blue)-500$/，只写text-red-500会漏掉md:text-red-500 - 别写
/text-.*/—— 会意外保留text-clip这类原生属性，体积反弹
@apply 规则没套在 @layer components 里
开发环境正常、生产环境消失，大概率是你把 @apply 写在裸的 CSS 规则里，比如：
.btn-primary { @apply px-4 py-2 bg-blue-600; }
Tailwind 的扫描器无法关联这个规则和它用到的工具类，就当它们没被引用过，直接删掉整段 CSS。
- 必须包在
@layer components块里：@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 里的一致。
- 错误：
npx tailwindcss -i input.css -o output.css --minify（缺--content） - 正确：每个路径单独传，双引号包裹：
--content "./src/**/*.{js,jsx,ts,tsx}" --content "./public/**/*.html" - CI 环境下 pwd 不是项目根目录？改用绝对路径：
--content "$PWD/src/**/*.{js,ts}" - 残留
TAILWIND_MODE=build环境变量？v3.3+ 已弃用，删掉它，否则可能干扰 JIT 对动态 class 的识别
dev 永远正常，因为 JIT 实时生成所有类；而生产构建依赖静态扫描结果，漏配一点，上线就丢样式——没人会在每次提交前手动检查 content 是否多写了星号、少写了大括号。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
