Tailwind构建变慢主因是content路径过宽、插件冗余及JIT未真正启用。应精简content数组、移除不用插件、删除废弃配置并验证JIT启动日志。
content路径配置太宽导致全量扫描
这是 Tailwind 构建变慢最常见、影响最大的原因。Tailwind 会逐个读取 content 列表里每个 glob 路径下的文件，提取类名字符串。路径一写宽，它就去扫 node_modules、.git、dist，I/O 直接卡死。
常见错误写法：
-
"./**/*.tsx"—— 匹配整个项目根目录下所有 .tsx，包括构建产物和工具配置 -
"./src/**/*"—— 没限定扩展名，可能读入巨型 JSON/MDX/LOG 文件
正确做法：
- 用数组，明确写出真实含类名的路径：
["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"] - Next.js 项目必须同时覆盖
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx} - Vue/Svelte 项目补上对应后缀：
./src/**/*.vue、./src/**/*.svelte - 加排除项避免干扰：
!**/*.test.{js,ts}、!**/*.stories.{js,ts}
验证是否生效：运行 npx tailwindcss --watch --verbose，看终端打印出的“Scanning files”列表是否干净、无冗余路径。
立即学习“前端免费学习笔记（深入）”；
启用了未使用的插件或功能
Tailwind 加载插件不是免费的。每个插件都会参与解析、匹配、生成全过程，CPU 开销随插件数量线性上升。很多项目保留了默认模板里的插件，但实际根本没用到对应类名。
典型冗余插件：
-
@tailwindcss/typography—— 博客类项目才需要，普通后台页面删掉 -
@tailwindcss/forms—— 如果没用form、input等表单类，直接移除 import 和plugins: []中的条目 -
darkMode: 'class'—— 全项目不用暗色模式？关掉它，省下所有.dark .xxx嵌套规则的生成开销
theme.extend 也要克制：
- 每加一个自定义颜色（如
brand: '#007bff'），Tailwind 就要为它生成 hover/focus/disabled/active 等所有变体，再乘以 spacing/sizing/border 等维度，CSS 体积和编译时间指数增长 - 非必要不 extend；真要加，优先用 CSS 变量 +
@apply封装，而非塞进 theme
JIT 模式没真正启用或被绕过
Tailwind v3+ 默认就是 JIT，但大量项目仍卡在“伪 JIT”状态：配置残留、环境信号错位、工具链干扰，导致每次保存都走全量重编译。
关键判断依据只有这个：终端启动时必须显示 Using JIT (Just-In-Time) mode。没有这行，就是 fallback 到旧流程。
排查要点：
- 删掉
tailwind.config.js里所有mode: 'jit'、purge: []、mode: 'aot'—— v3+ 已废弃，写了反而触发降级 - 确认
package.json中"tailwindcss"版本 ≥3.0.0，且没共存@tailwindcss/jit - Vite/Next.js 用户：别手动写
postcss.config.js，90% 的 JIT 失效源于它打乱插件顺序；必须写，就确保tailwindcss是第一个插件 - 启动命令加
TAILWIND_MODE=watch，尤其在封装脚本（如 Craco/Umi）中，NODE_ENV=development可能被覆盖
动态类名没白名单，导致 safelist 过度膨胀
JIT 不执行 JS，只做静态字符串匹配。像 className={`text-${size}-500`} 这种写法，size 是变量，Tailwind 根本不知道它可能是 'sm' 还是 'xl'，直接当死代码跳过 —— 生产构建时这些类就被裁掉了，样式丢失。
安全做法分三层：
- 优先改写为条件表达式：
className={size === 'sm' ? 'text-sm-500' : 'text-xl-500'} - 用
clsx封装：className={clsx('text-500', { 'text-sm': size === 'sm', 'text-xl': size === 'xl' })} - 实在要正则白名单，按实际值收敛：
/^text-(sm|md|lg|xl)-500$/，而不是/^text-/（后者会保留全部 text-* 类，体积反弹）
注意：safelist 是兜底手段，不是替代方案。滥用它会让优化前功尽弃，尤其在低代码或主题切换类场景，建议把可变部分交给 style 属性处理，或用 @apply 提前封装成静态类。
Tailwind 构建慢的本质，从来不是“CSS 太多”，而是“Tailwind 在无效路径上反复读文件、为不存在的类反复生成规则、被工具链绕过 JIT 监听”。精准的 content 数组、干净的插件列表、真正的 JIT 启动信号，三者缺一不可。最容易被忽略的，是那个看似无害的 postcss.config.js 文件——删掉它，往往比调任何参数都管用。
