Tailwind CSS打包体积大主因是content配置错误导致JIT退化为全量输出：路径未覆盖所有含className文件、漏写扩展名、未包含MDX/EJS等模板、动态类名未进safelist或@apply封装，且开发环境不触发tree-shaking，验证须走生产构建并检查dist输出。
Tailwind CSS打包体积大，99%不是框架问题，而是content字段没配全或根本没生效，导致JIT退化为全量输出——你看到的2MB+ CSS里塞满了bg-gradient-to-br、first-letter:font-bold这类代码中从未出现过的类。
tailwind.config.js 的 content 路径写错或漏写
这是最常踩的坑：路径不覆盖所有含className的文件，JIT就“看不见”你用的类，只能保守保留全部3000+工具类。
-
content: ["./src/**/*.{js,ts}"]→ 漏了.jsx和.tsx，React组件里的类名全被忽略 -
content: ["src/App.tsx"]→ 只扫单个文件，子组件里的text-red-500根本不会被识别 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，在Vite/Next.js中解析不一致，部分文件可能被跳过 - Next.js项目只写了
app/**/*却漏掉pages/**/*→dark:、group-类大概率丢失 - 用了MDX或EJS模板（如
content/**/*.mdx、views/**/*.html.ejs）但没加进content→ SSR渲染出的class不在扫描范围，必然误删
动态类名（如 text-${color}-500）上线就丢样式
JIT是静态扫描，不执行JS，也不推断变量值。写className={`text-${color}-500`}，它只匹配字面量字符串，不会猜color可能是red还是blue。
- 优先改用
@apply封装：在.btn-error { @apply text-red-500; }里定义，再把该CSS文件路径（如src/styles/components.css）加进content - 必须用动态拼接时，在
tailwind.config.js的safelist里写精确正则，例如/^text-(red|blue|green)-500$/，结尾加$防误匹配text-red-5000 - 避免
/^text-/这种宽泛正则——它会保住全部text-类，等于放弃tree-shaking -
md:text-lg和text-lg是两个独立类，safelist里只写后者，前者仍会被删
没走生产构建流程，验证全是假象
开发服务器（npm run dev）是JIT实时生成，完全不依赖content扫描，也不触发tree-shaking。你看到的体积和样式正常，不代表生产环境也OK。
- 验证必须强制走生产流程：
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）才是真生效
真正难处理的是那些嵌套在第三方组件库、MDX frontmatter、服务端路由参数渲染中的类名——它们不出现在你的JSX里，但真实参与渲染。这时候safelist得按实际取值收敛，而不是靠猜；content路径得穷举所有模板位置；而验证动作必须落在dist/目录下的真实产出上，不是DevTools里那个2MB内存快照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
