Tailwind CSS JIT 引擎默认启用，90% 编译慢、热更新卡、样式丢失源于 content 路径错误、残留 mode: 'jit' 或未卸载 @tailwindcss/jit；须验证 npx tailwindcss -v 为 v3.x.x、package.json 中 tailwindcss ≥3.0.0 且无 @tailwindcss/jit、终端显示 “Using JIT (Just-In-Time) mode”。
Tailwind CSS 的 JIT 引擎不是“配出来”的，而是默认启用、但极易被错误配置关掉——你看到编译慢、热更新卡、样式丢失，90% 是 content 路径写错、mode: 'jit' 残留、或 @tailwindcss/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 - 启动开发服务时，终端必须打印出
Using JIT (Just-In-Time) mode—— 没这行，就是 fallback 到全量编译了
content 路径写错 = JIT 完全失效
JIT 不分析 JS 逻辑，只按 content 数组里写的路径去读文件内容。路径错一个字符、漏一个扩展名、用错格式，它就完全看不见你写的类名。
- ❌ 错误写法：
"./**/*.tsx"（会扫node_modules、.git、dist）或"./src/**/*"（不指定扩展名，解析器可能跳过） - ✅ 推荐写法：
["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"]；Next.js 双路由需加：["./app/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"] - 用
npx tailwindcss --watch --verbose观察实际扫描了哪些文件，一眼看出是否有多余路径或漏扫
PostCSS 插件顺序和动态 class 的坑
JIT 的监听依赖 PostCSS 插件链正确加载，而动态拼接类名会让 JIT 直接“失明”——不是变慢，是压根不生成对应规则。
立即学习“前端免费学习笔记（深入）”；
- Next.js / Vite 用户：**不要手动写
postcss.config.js**；如必须写，确保require('tailwindcss')是第一个插件 - ❌
className={`p-${padding}`}或class="text-${size}-500"→ JIT 无法静态分析，对应类不会进输出 - ✅ 改用条件判断：
className={padding === '4' ? 'p-4' : 'p-6'}，或用safelist白名单兜底：safelist: [/p-(4|6)/, /text-(sm|lg)-500/]
最常被忽略的点：JIT 是开发期优化，不改变生产构建逻辑；但如果你的 content 过宽或插件链被干扰，连开发时的热更新都会卡在 3 秒以上——问题不在“怎么开 JIT”，而在“怎么不让它被悄悄关掉”。
