tailwind css生产包体积过大，99%是content字段配置错误或失效导致jit退化为全量输出；需确保路径覆盖所有含classname文件（如.tsx/.mdx）、避免./前缀、用精确正则兜底动态类，并通过生产构建+grep验证扫描是否生效。
Tailwind CSS 生产包体积过大，99% 是 content 字段没配对或根本没生效，导致 JIT 模式退化为全量输出——它不报错，只安静地保留全部 3000+ 工具类。
content 路径漏写、写错或带 ./ 前缀
路径不覆盖所有含 className 的文件，JIT 就不会扫描到那些类，结果要么全删（样式丢失），要么全留（体积爆炸）。
-
content: ["src/**/*.{js,ts}"]→ 漏了.jsx和.tsx，React 组件里的类全被忽略 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，在 Vite/Next.js 中解析不一致，app/layout.tsx或data/**/*.mdx可能被跳过 - Next.js 项目只写了
app/**/*却漏掉pages/**/*→dark:、group-、peer-类大概率消失 - SSR 或静态生成用的模板（如
views/**/*.html.ejs、content/**/*.mdx）没加进content→ 服务端渲染出的 class 被当“死代码”删掉
动态类名没在 safelist 中精确正则兜底
JIT 不执行 JS，只匹配源码中出现的字面量字符串。变量拼接类名在构建时无法推断，不显式兜底就等于主动放弃样式。
- 优先改用
@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 -l与grep -o "text-lg" ./dist/output.css | wc -l，若后者远少于前者，说明生效了
真正容易被忽略的是：哪怕 content 看似写对了，只要有一个路径因大小写、扩展名拼写、文件系统 glob 行为差异（比如某些系统不支持 **/*.tsx）而实际未命中，JIT 就会静默失效——你得靠 grep 和真实构建输出来确认，而不是靠本地页面是否显示正常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
