Tailwind构建慢、JIT未生效、CSS体积大三大问题根源在于配置不当：content路径过宽、purge字段残留、全量启用插件及变体；应收窄扫描范围、删除purge、精简核心插件与主题。
构建慢？先确认是不是扫描范围过大
Tailwind 构建卡顿，80% 情况下不是框架本身慢，而是 content 配置太宽泛，导致扫描成百上千个无关文件（比如测试、文档、node_modules 里的 .md 或 .json）。扫描过程会逐行解析每个匹配文件，提取类名，I/O 和正则开销直接拉高构建时间。
- 把
content路径收窄到真实使用 Tailwind 的源码目录，例如：./src/pages/**/*.{js,jsx,ts,tsx}和./src/components/**/*.{js,jsx,ts,tsx} - 显式排除干扰项：
!**/*.test.{js,jsx,ts,tsx}、!**/*.stories.{js,jsx,ts,tsx}、!**/docs/** - 避免用
./src/**/*这种通配——它会命中src/assets下的 SVG、JSON 等非代码文件，而 Tailwind 提取器仍会尝试解析它们
JIT 模式没生效？检查 mode 和 purge 冲突
Tailwind v3.0+ 默认启用 JIT，但如果你在配置里同时写了 mode: 'jit' 和旧式的 purge 字段（尤其在升级项目中残留），会导致构建逻辑降级回兼容模式，失去增量编译和按需生成优势，体积和速度双双受损。
- 确认配置中只保留
content字段（v3.0+ 推荐写法），彻底删除purge字段 -
mode: 'jit'在 v3.0+ 已是默认行为，显式声明无害但冗余；若你用的是 v4.0+，该字段已被移除，保留会报错Invalid configuration: "mode" is not supported - 确保
NODE_ENV=production时 JIT 仍工作——它不依赖环境变量开关，只依赖content是否正确配置
CSS 体积炸了？别只盯着 tailwind.config.js
生成几 MB 的 CSS，往往不是因为你写了太多类，而是因为配置“全量启用”：所有颜色、间距、字体大小都被生成，哪怕只用了 text-sm 和 bg-blue-500。Tailwind 不会自动裁剪未引用的变体或插件。
- 禁用不用的核心插件：
corePlugins: { float: false, clear: false, objectFit: false, objectPosition: false } - 收缩
variants（v3.0+ 改为plugins中控制）：只开启真正需要的响应式或状态变体，比如backgroundColor: ['hover', 'focus']，而不是默认全开 - 精简主题规模：用
theme.extend.spacing替代整个spacing对象重写；颜色只 extend 实际用到的，而非导入colors全集
构建后 CSS 还是臃肿？验证是否真被 Purge
即使配置正确，也可能因动态类名（如 className={`${base} ${isPrimary ? 'bg-blue-500' : 'bg-gray-300'}`）或第三方库注入的类未被识别，导致 Purge 失效——生成的 CSS 包含大量死代码。
立即学习“前端免费学习笔记（深入）”；
- 用
source-map-explorer dist/*.css查看实际输出中哪些规则占比异常高，定位冗余来源 - 对动态类名加
safeList，但别滥用：safeList: [/^bg-/, /^text-/]会放行全部背景色和文字色，抵消 Purge 效果；应尽量写具体前缀，如/^bg-(blue|gray)-[0-9]+$/ - 检查是否误将 CSS-in-JS 库（如 Emotion）或 Styled Components 的 class 名混入 Tailwind 扫描路径——它们不会被 Purge，却占体积
purge 字段。优化不是堆工具，而是让 Tailwind 知道“什么值得扫、什么必须删”。 
