Tailwind CSS 生产环境体积过大主因是 content 配置错误或未生效，导致 JIT 退化为全量输出；需确保路径完整、无误前缀、覆盖所有模板与扩展名，并正确使用 safelist 和清除缓存。
Tailwind CSS 生产环境 CSS 体积过大，99% 不是框架问题，而是 content 字段没配全或根本没生效，导致 JIT 编译器退化为全量输出——你构建出的 CSS 里塞满了 bg-gradient-to-br、first-letter:font-bold 这类从未在代码中出现过的类。
content 路径漏写、写错或带 ./ 前缀
这是最隐蔽也最常踩的坑。JIT 模式只扫描 content 数组里明确列出的路径，漏一个扩展名、多一个点号，就等于关掉了裁剪开关。
-
content: ["./src/**/*.{js,ts}"]→ 漏掉.jsx和.tsx，所有 React 组件里的className都不会被识别 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，在 Vite/Next.js 中可能被跳过，统一用src/**/*.{js,jsx,ts,tsx,html} - Next.js 项目只写了
app/**/*却漏了pages/**/*→dark:、group-、peer-类大概率丢失 - 用了 MDX 或 EJS 模板（如
content/**/*.mdx、views/**/*.html.ejs）但没加进content→ SSR 渲染出的 class 被当“死代码”删掉
动态类名未兜底，safelist 正则太宽泛
Tailwind 不执行 JS，只匹配源码中真实出现的字符串字面量。class={`text-${color}-500`} 这种写法，它直接忽略；不显式兜底，上线就是样式消失。
- 优先改用
@apply封装：在components.css里写.btn-error { @apply text-red-500; }，再把该文件路径加入content - 必须用动态拼接时，
safelist写精确正则：/^text-(red|blue|green)-500$/，结尾加$防止误匹配text-red-5000 - 避免
/^text-/这种宽泛正则——它会保留全部text-类，体积立刻反弹 -
md:text-lg和text-lg是两个独立类，safelist里只写后者，前者仍会被删
没走真正的生产构建流程，验证全是假象
开发服务器（npm run dev）是 JIT 实时编译，完全不依赖 content 扫描，也不触发 tree-shaking。你看到的 2MB+ CSS 只是内存快照，不是交付物。
立即学习“前端免费学习笔记（深入）”；
- 验证必须强制走生产流程：
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 人工注入冷门但合法类：在某个被
content覆盖的文件里加className="bg-hotpink" - 构建后运行
grep -o "bg-hotpink" ./dist/output.css：非空说明 JIT 没跑，还在全量打包；为空才说明扫描已启动 - 再用
grep -o "text-lg" ./dist/output.css | wc -l对比源码中出现次数，显著减少（比如 120→8）才是真生效
真正容易被忽略的，不是怎么写 safelist 或 content，而是每次改完 tailwind.config.js 后，是否清除了构建缓存并重启 dev server——JIT 编译器会缓存扫描结果，旧缓存可能导致新配置完全不生效，连 tailwind build -c tailwind.config.js 都可能读错状态。
