Tailwind CSS 生产包体积大（近2MB）主因是content配置错误或未走生产构建，导致JIT失效而输出全量CSS；需正确配置路径、覆盖所有文件类型、避免动态类名未兜底，并用grep验证JIT是否生效。
Tailwind CSS 生产包体积大，99% 是因为 content 字段没配全、路径写错，或根本没走生产构建流程——JIT 模式压根没启动，结果输出的是近 2MB 的全量 CSS。
content 路径配置错误导致 JIT 完全失效
路径漏写、带 ./ 前缀、扩展名不全，都会让 JIT 扫描失败，进而退化为保守全量输出。这不是警告，是静默降级。
- Next.js 项目必须同时包含
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx}，漏掉任一，dark:、group-类大概率消失 - 写
./src/**/*.{js,ts}会漏掉.jsx和.tsx；写死src/App.tsx却不加src/components/**/*.tsx，子组件里的类名全被忽略 -
./src/**这种带点前缀的写法，在 Vite/Next.js 中解析不一致，SSR 场景下可能跳过app/layout.tsx或data/**/*.mdx - 服务端模板（如
views/**/*.html.ejs、content/**/*.mdx）也得加进content，否则渲染出的 class 会被当“死代码”删掉
动态类名没兜底，PurgeCSS 直接丢样式
Tailwind 不执行 JS，只匹配源码中真实出现的字符串字面量。变量拼接如 text-${color} 在构建时无法推断，不显式兜底就等于主动放弃样式。
- 优先改用
@apply封装：在.btn-error { @apply text-red-500; }中定义语义类，再把该 CSS 文件路径加入content - 必须用动态拼接时，在
tailwind.config.js的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" ./src/**/* | wc -lvsgrep -o "text-lg" ./dist/output.css | wc -l，若显著减少（比如从 120 次降到 8 次），就是有效裁剪
真正容易被忽略的是：JIT 是否生效，不能靠体积数字判断，必须靠人工注入 + grep 验证；而 content 路径是否覆盖 SSR/MDX/模板文件，往往在上线后才发现样式丢失——那时已经晚了。
