Tailwind v3+ 体积异常主因是 content 路径配置错误、扩展名未全覆盖或未走生产构建；JIT 仅扫描 content 明确路径，漏配会导致样式丢失或全量输出，且开发模式不触发裁剪。
Tailwind v3+ 不需要单独配置 PurgeCSS，它已内建 JIT 编译器，真正起作用的是 content 字段是否配对、配全，并且构建必须走生产模式。 所有“加 PurgeCSS 插件”“改 postcss.config.js”的操作，对体积控制无效，甚至可能掩盖真实问题。
content 路径写错，JIT 直接退化为全量输出
这是 90% 体积异常的根源。JIT 只扫描 content 数组里明确列出的路径和扩展名，漏一个就可能让整类样式（比如 dark:、group-）消失或被保守保留。
- 写
src/**/*.{js,ts}→ 忽略所有.jsx和.tsx，React 组件里的className全部“看不见” - 写
./src/**/*.{js,tsx}→./前缀在 Vite/Next.js 中常被跳过，尤其 SSR 模板（如views/**/*.html.ejs）根本不会扫到 - Next.js App Router 项目只写
app/**/*→ 漏掉pages/**/*或components/**/*，hover:bg-blue-500这类带状态前缀的类极易误删 - 用 MDX 写内容？没加
content/**/*.mdx→className="prose"这种类直接丢失
动态类名不兜底，上线就丢样式
Tailwind 不执行 JS，只匹配源码中真实出现的字符串字面量。像 text-${color} 这种写法，除非 color 是写死的 "red" 且该行被 content 扫到，否则必然被剔除。
- 优先用
@apply封装：在src/styles/buttons.css里写.btn-primary { @apply px-4 py-2 bg-blue-600; }，再把./src/styles/**/*.css加进content - 必须动态拼接时，在
tailwind.config.js的safelist里用正则，例如/^bg-(blue|gray)-[0-9]+$/，别写/^bg-/—— 后者等于放行全部背景类 - 第三方库（如
react-datepicker）的 class 不在你源码里？加进safelist，别往content里塞node_modules/**，体积容易反弹
不走生产构建，压根不触发裁剪
npm run dev 正常 ≠ 生产正常。开发服务器是内存中实时生成 CSS，完全不依赖 content 扫描结果；真正裁剪只发生在生产构建阶段。
- 错误命令：
npx tailwindcss -i ./src/input.css -o ./dist/output.css→ 缺--minify，也未设TAILWIND_MODE=build，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 完全没跑
最常被忽略的点是：你以为配了 content 就万事大吉，但路径是否真实可读、扩展名是否全覆盖、构建是否真走生产流程——这三者缺一不可。任何一环断开，Tailwind 就会安静地输出 2MB 全量 CSS，而你还在调 PostCSS 插件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
