Tailwind CSS 文件体积过大根本原因是 content 字段配置错误导致 JIT 模式失效，必须精确配置所有含 class 的文件路径、动态类名需 safelist 兜底，并通过生产构建验证是否真正生效。
Tailwind CSS 生成的 CSS 文件体积过大，根本原因不是它“臃肿”，而是你没告诉它哪些类真正被用到了——content 字段配错、漏配或路径无效，JIT 模式就形同虚设，结果打包出接近全量的 CSS（常超 2MB）。
tailwind.config.js 的 content 字段必须精确覆盖所有含 class 的文件
这是最核心、也最容易翻车的一环。v3+ 已废弃 purge，只认 content；它不是可选项，是 JIT 生效的开关。
- 路径必须真实存在且可被构建工具读取：比如写
src/**/*.{js,ts,jsx,tsx,html,vue}，不能只写src/*.js或留空/注释掉 - 避免
./src/**这种带点前缀的写法——Vite、Next.js 等工具对./解析不一致，统一用src/** - Next.js 项目务必包含
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx}，否则dark:、group-等上下文类可能被误删 - SSR 或静态生成（如
generateStaticParams）的模板路径也要加进去，比如data/**/*.mdx或views/**/*.html.ejs
动态拼接类名（如 className={`${isActive ? 'bg-blue-500' : 'bg-gray-200'}`）必须显式兜底
PurgeCSS 是静态扫描，无法推断运行时变量值。漏兜会导致上线后样式消失，典型现象是按钮没背景、文字无颜色、响应式断点失效。
- 优先改用
@apply封装成语义类（如.btn-active），再把该 CSS 文件路径加入content - 必须用动态类时，在
tailwind.config.js中配置safelist，用正则比字符串更可控：/^bg-(blue|gray)-[0-9]+$/，避免写/^bg-/这种宽泛匹配 - 框架组件库（如
react-datepicker）的类不在你源码里？要么加到safelist，要么在content中显式引入其node_modules路径（慎用，体积易反弹）
确认 JIT 是否真生效：别信本地开发，只看生产构建输出
开发模式下 Tailwind 默认不触发清理，npm run dev 正常 ≠ 生产正常。上线后样式丢失，八成是构建时根本没扫到关键文件。
立即学习“前端免费学习笔记（深入）”；
- 强制走生产流程验证：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 检查输出 CSS 是否真瘦身：用
grep -o "text-lg" dist/output.css | wc -l对比源码中出现次数；若远少于源码频次，说明生效了 - Vite 用户可用
rollup-plugin-visualizer查看最终 CSS chunk 构成，确认tailwind.css是否稳定在 100KB 内 - 错误现象如
Cannot read property 'backgroundColor' of undefined，往往不是 JS 错，是bg-red-500被删了但 DOM 还在读取对应样式
真正难的不是配对 content，而是当项目有 SSR、MDX、低代码模板、多仓库共用 UI 库等混合场景时，content 路径要同时满足静态扫描和运行时上下文——这时候一个漏掉的 **/*.mdx 或一处错误的 glob 层级，就足以让体积回到 3MB 级别。
