tailwind css 打包体积异常变大，主因是 content 路径配置错误或缺失、未执行生产构建导致 jit 未启用，从而输出近全量 css；需确保 content 覆盖所有模板文件、避免 ./ 前缀、补充 safelist 应对动态类，并用生产构建+grep 验证 jit 是否生效。
Tailwind CSS 打包体积异常变大，基本就是 content 字段没配对、没配全，或者根本没走生产构建流程——JIT 引擎压根没启动，结果输出的是接近全量的 CSS（常超 2MB），而不是你代码里真正用到的那几十 KB。
content 路径写错或漏掉关键文件类型
这是最常见也最隐蔽的根源。Tailwind v3+ 的 JIT 模式完全依赖 content 数组里列出的路径去静态扫描类名字符串；路径错一个字符、少一种扩展名，它就“看不见”你写的 class。
-
content: ["src/**/*.{js,ts}"]→ 漏了.jsx和.tsx，所有 React 组件里的className全被忽略 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，在 Vite/Next.js 中可能被跳过，统一用src/**/*.{...} - Next.js 项目只写了
app/**/*却漏了pages/**/*→dark:、group-这类上下文工具类大概率丢失 - 用了 MDX、EJS 模板生成 HTML？没加
src/content/**/*.mdx或views/**/*.html.ejs→ SSR 渲染出的 class 不在扫描范围内，JIT 只能保守保留全部
动态类名没兜底，导致 JIT 误删 + 上线样式消失
Tailwind 不执行 JS，只匹配源码中出现的字面量字符串。像 className={`${isActive ? 'bg-blue-500' : 'bg-gray-200'}`} 这种写法，只要 'bg-blue-500' 和 'bg-gray-200' 真实出现在某个被 content 扫到的文件里，就不会丢。但一旦漏扫，或者用了变量拼接（如 text-${color}），这些类就直接进回收站。
- 优先用
@apply封装：把高频组合抽成语义类（如.btn-primary），再确保该 CSS 文件路径加入content - 必须用动态拼接时，在
tailwind.config.js的safelist中加正则，例如/^bg-(blue|gray)-[0-9]+$/，避免宽泛匹配/^bg-/ - 第三方组件库（如
react-datepicker）的 class 不在你源码中 → 显式加进safelist，别轻易往content里塞node_modules路径，容易反弹体积
没走生产构建，误以为 JIT 已生效
本地 npm run dev 正常，不代表上线没问题。开发服务器是 JIT 实时生成，不依赖 content 扫描结果；而 npm run build 才真正触发 Purge 流程。如果构建命令里混入了 TAILWIND_MODE=watch 或没加 --minify，purge 逻辑根本不会跑。
- 强制验证：运行
TAILWIND_MODE=build npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify - 注入测试类：在任意被
content覆盖的文件里加一行className="bg-hotpink text-9xl"，构建后grep -o "bg-hotpink" ./dist/output.css—— 若有输出，说明 JIT 完全没生效 - Vite 用户可用
rollup-plugin-visualizer查看最终 CSS chunk 构成，确认tailwind.css是否稳定在 100KB 内
真正难的不是配 content，而是意识到：JIT 不是“开了就瘦”，它是一条脆弱的静态分析链——路径错一环、构建模式错一步、动态类漏一个兜底，整条链就断掉，退化为全量打包。每次改完配置，必须用生产构建 + 关键类验证双保险，否则上线前最后一刻才暴露样式丢失，代价远高于提前多跑一次 grep。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
