Tailwind CSS 生产构建体积未减小，主因是 content 配置错误或缺失、未执行生产构建流程，导致 JIT 引擎未启用而输出全量 CSS；需确保 content 路径准确覆盖所有源码及模板文件，并验证构建命令是否启用 --minify 和 TAILWIND_MODE=build。
Tailwind CSS 生产构建体积没变小，基本就是 content 没配对、没配全，或者根本没走生产构建流程——JIT 引擎压根没启动，结果输出的是接近全量的 CSS（常超 2MB），而不是你代码里真正用到的那几十 KB。
content 路径写错或漏掉关键文件类型
这是最常见也最隐蔽的根源。Tailwind v3+ 的 JIT 模式完全依赖 content 数组里列出的路径去静态扫描类名字符串；路径错一个字符、少一种扩展名，它就“看不见”你写的 className。
-
content: ["src/**/*.{js,ts}"]→ 漏了.jsx和.tsx，所有 React 组件里的className全被忽略 -
content: ["./src/**/*.{js,jsx,ts,tsx}"]→ 带./前缀，在 Vite/Next.js 中可能被跳过，统一用src/**/*.{js,jsx,ts,tsx} - 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 - 检查输出是否真瘦身：
grep -o "text-lg" dist/output.css | wc -l对比源码中出现次数；若远少于源码频次，说明生效了 - 临时在某个
.tsx文件里加一行className="bg-hotpink text-9xl"（非法值），再构建：如果输出 CSS 里真出现了bg-hotpink，说明 JIT 退化为全量模式
真正难的不是配置本身，而是确认哪些路径实际参与了最终 HTML 的生成——比如服务端渲染模板、MDX 内容页、甚至 public/index.html 里硬写的 class，都得显式覆盖。漏掉任意一类，JIT 就安静地放弃裁剪，你却毫无感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
