tailwind css v3+ 移除 purge 字段，仅通过 content 数组扫描文件裁剪样式；content 必须精确覆盖所有含 class 字面量的文件路径，动态类名需用 safelist 显式声明，否则构建时被剔除。
因为 Tailwind CSS v3.0+ 已将样式清理逻辑完全内建，purge 字段被硬性移除，不再接受、不兼容、不降级——你配了就报 Unknown option 'purge' 错误，根本不会运行。
content 字段就是唯一入口，不是“替代”，是接管整个扫描流程
Tailwind v3+ 不再区分“生成 CSS”和“删没用的类”两个阶段。它把 class 扫描、匹配、剔除全部塞进构建时的 CSS 生成环节，只认 content 数组里写的路径。漏一个 ./src/components/**/*.{tsx}，里面用的 flex-col 就直接消失；多写个错路径，构建可能成功但体积不变——它 fallback 到全量输出，不警告、不提示。
-
content必须覆盖所有含 class 字面量的文件：JSX、TSX、Vue、HTML、甚至./public/index.html或./node_modules/daisyui/dist/**/*.js - 不支持正则通配符，
**/*.tsx可以，**/pages/*.{ts,tsx}在某些系统下会漏匹配，建议拆成两行 - 开发服务器（Vite dev / Next.js dev）走 JIT 实时编译，不依赖
content；只有npm run build才真正触发裁剪——这就是为什么本地正常、上线崩样式的根源
动态类名不会被推断，safelist 不是补救，是必要声明
Tailwind 不执行 JS，也不展开模板字符串。class={`${isRed ? 'text-red-500' : 'text-blue-500'}` 这种写法，只要两个字符串字面量都出现在扫描文件里，就能保留；但 text-${color}-500 这种，源码里压根没完整类名，必然被删。
- 安全做法是用
safelist显式兜底，比如/^text-(red|blue|green)-\d+$/，而不是关掉裁剪或写/text-.*/这种宽泛正则 - 响应式前缀也要显式包含：
/^(md|lg):text-red-500$/，否则md:text-red-500会被当“未使用”干掉 -
@apply写在裸 CSS 规则里（没包@layer components）也会被忽略——扫描器无法建立工具类引用关系
旧版 purge 配置残留会导致静默失效
如果你还留着 purge: { enabled: false } 或 purge: ['./src/**/*.{js,ts}']，v3+ 解析时要么报错，要么直接忽略。它不会警告“这个配置已废弃”，也不会 fallback 到旧逻辑——结果就是你以为关了 tree-shaking，其实只是没生效，CSS 体积纹丝不动。
- 检查
tailwind.config.js里有没有任何purge字段，删干净 - 确认构建命令是否真走生产模式：Vite 要
npm run build，不是vite build漏参数；Next.js 要next build，且content必须在顶层配置对象里 - 验证是否生效？别看 dev 工具，直接查
dist/*.css文件，用grep -o "text-lg" | wc -l对比源码中出现次数
最常被忽略的点：content 路径对不上磁盘实际结构（大小写、斜杠方向、嵌套层级），以及动态类名没进 safelist 却指望 JIT 模式自动猜——Tailwind 不猜，它只信字面量和你亲手写的正则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
