Tailwind CSS 编译慢主因是content路径错误或未启用v3+ JIT模式；需验证版本≥3.0.0、无@tailwindcss/jit包、终端显示“Using JIT”；content须精准数组配置，避免宽泛路径；禁用未用插件，慎用动态class，优先用条件类或safelist。
Tailwind CSS 编译慢，几乎从来不是 JIT 引擎本身的问题，而是它“看不见你写的类”或“被逼着扫几千个无关文件”——核心就两条：content 路径写错，或者根本没跑在 v3+ 的 JIT 上。
确认你真在用 Tailwind v3+ 的 JIT 模式
别信配置里有没有 mode: 'jit'，这行在 v3.0+ 已被移除，写了反而触发降级或报错。真正有效的验证方式只有三个：
- 运行
npx tailwindcss -v，输出必须是v3.x.x（如v3.4.3） -
package.json中"tailwindcss"版本 ≥3.0.0，且不能同时存在@tailwindcss/jit包（有就立刻npm rm @tailwindcss/jit） - 启动开发服务器时终端必须打印
Using JIT (Just-In-Time) mode—— 没这行，说明你还在全量编译
如果你用的是 Next.js、Vite 或 Remix 等现代框架，它们默认集成 v3+，但手动加了 postcss.config.js 就可能覆盖默认插件顺序，导致 tailwindcss 插件没走 JIT 流程。
修正 content 路径：宽泛 = 卡死，精准 = 秒出
content 不是“大概写个 src 就行”，它是 JIT 唯一的“眼睛”。路径错一位、漏一个扩展名、写成字符串而非数组，对应文件里的 className 就彻底消失。
立即学习“前端免费学习笔记（深入）”；
-
content必须是数组：['./src/**/*.{js,jsx,ts,tsx}', './public/**/*.html']✅，'./src/**/*.tsx'❌ - Next.js 双路由必须同时覆盖：
['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'] - Vue 项目加
./src/**/*.vue；Svelte 加./src/**/*.svelte（否则@apply不被扫描） - 绝对避免
./**/*.js或./src/**/*这类写法——它会把node_modules、.git、dist全扫一遍，I/O 直接拉满
用 npx tailwindcss --watch --verbose 启动，看终端实际列出了哪些文件。如果看到 node_modules/xxx/index.js，说明路径太宽，立刻收紧。
排查动态 class 和插件干扰：JIT 不是运行时编译器
JIT 是静态分析器，它不执行 JS，只匹配字符串字面量。一旦出现模板字符串拼接，对应组合类就从生成结果里蒸发。
-
className={`text-${size}-500`}→text-sm-500不会生成 ❌ - 改用条件对象：
className={size === 'sm' ? 'text-sm-500' : 'text-lg-500'}✅ - 或用
clsx：className={clsx({ 'text-sm-500': size === 'sm' })}✅ - 高频动态值可白名单兜底：
safelist: [/text-(sm|lg|xl)-500/]，但别滥用，否则体积反弹 - 禁用未用插件：
@tailwindcss/forms没用表单类？删掉；@tailwindcss/typography没用 prose？也删掉
每个启用的插件都会增加解析开销；theme.extend.colors 里每加一个色值，都会参与 hover、focus、disabled 等所有变体的组合生成，规则数指数增长。
开发热更新卡顿？别急着优化，先看是不是环境变量没对上
热更新慢常被误判为“Tailwind 慢”，其实是 JIT 的监听机制被绕过。比如 Vite HMR 频繁重载、编辑器自动保存、或 Craco/Umi 等工具覆盖了 NODE_ENV，导致每次变更都触发全量重建。
- 显式加
TAILWIND_MODE=watch最稳，例如："dev": "TAILWIND_MODE=watch vite" - Vite 用户优先用
@tailwindcss/vite插件，它自动适配 HMR，无需手动设 mode - 某些场景下，加
TAILWIND_MODE=build反而更流畅——它跳过文件监听和增量逻辑，直接走静态生成，避免资源争抢导致的假性卡死 - Next.js 用户：删掉根目录的
postcss.config.js，90% 的本地慢问题因此解决
真正拖慢构建的，往往不是某一行配置，而是多个小疏忽叠加：路径漏了一个 x，插件多启了一个，环境变量少设了一个，再加一个模板字符串——四者一碰，JIT 就从“秒出”变成“卡住”。最常被忽略的，是以为自己在 JIT，其实终端根本没打印那行 Using JIT (Just-In-Time) mode。
