Tailwind CSS v3 构建后体积过大主因是 content 配置错误或缺失，导致 JIT 退化为全量输出；需确保路径准确、覆盖所有文件类型、避免 ./ 前缀、补全动态类兜底及 safelist 精确正则，并通过生产构建验证 JIT 是否生效。
Tailwind CSS v3 构建后 CSS 体积过大，99% 是 content 字段没配全或根本没生效，导致 JIT 引擎退化为全量输出——你打包出的 dist/output.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（
content/**/*.mdx）或 EJS（views/**/*.html.ejs）模板但没加进content→ SSR 渲染出的 class 被当“死代码”删掉
动态类名未兜底，safelist 正则太宽泛
JIT 不执行 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）才代表裁剪到位
真正容易被忽略的是：JIT 是否生效，和开发时样式能否预览完全无关；你改了十次 tailwind.config.js 却没跑一次 TAILWIND_MODE=build，就等于一直在盲调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
