根本原因不是Tailwind变慢，而是JIT模式未启用导致全量重编译；常见原因包括配置残留、inotify失效、环境变量缺失、content路径错误、PostCSS插件顺序不当及动态class无法静态分析。
根本原因不是 Tailwind 本身变慢，而是 JIT 模式没真正跑起来——它退化成了全量重编译，每次保存都从头扫文件、重新生成全部 CSS。
终端没显示 “Using JIT (Just-In-Time) mode”
这是最直接的信号：JIT 根本没进入 watch 流程。常见诱因包括：
-
tailwind.config.js里还留着已废弃的mode: 'jit'或purge: []字段，v3+ 会直接忽略甚至干扰启动逻辑 - 容器或 WSL2 环境下
inotify事件不可用，监听器收不到文件变更，自动 fallback 到低效轮询或停摆 - 没设
TAILWIND_MODE=watch，尤其在自定义脚本或 Docker 启动命令中，环境变量被覆盖后 JIT 默认跳过监听 - 运行
npx tailwindcss -v确认版本 ≥ 3.0.0；若输出带@tailwindcss/jit，立刻npm rm @tailwindcss/jit
content 路径配置宽泛或失效
JIT 的“按需”依赖精准扫描，路径一错，它就只能猜、只能全量生成：
- 写成
"./**/*.tsx"会遍历node_modules、.git、dist，I/O 拖垮整个流程 - 在 Docker 中挂载路径错位，比如
content: ["./src/**/*.{ts,tsx}"]指向的是空目录，实际源码在/app/src却没映射进去 - Next.js 项目漏掉
./app/**/*.{ts,tsx}，layout.tsx或page.tsx里的 class 就扫不到 - 验证方式：进开发环境执行
npx tailwindcss --content "./src/**/*.{ts,tsx}" --dry-run，看输出是否包含你刚写的类名
PostCSS 插件链被意外截断
Tailwind 必须是第一个插件，否则 CSS 还没到它手里就被压缩/转义掉了：
- Next.js/Vite 用户手动加了
postcss.config.js，导致框架内置的 JIT 自动推导逻辑被禁用 - 插件顺序写成
[cssnano, tailwindcss, autoprefixer]——cssnano提前把字符串压缩或去注释，JIT 扫不到原始 class - 检查
npm ls postcss，确保容器内装了postcss@8.x；缺失时 Tailwind 不报错，但插件链静默跳过 - 动态 class 如
className={`p-${size}-4`}在插件链错位时更难被捕获，因为正则 fallback 也失效了
动态 class 和 @apply 触发静态分析失败
JIT 只信任能被 AST 或强正则识别的字符串字面量，拼接稍复杂就漏掉：
-
className={`text-${color}-500`}这种写法，color是变量，JIT 无法推导出text-red-500等组合，结果就是样式不生成 -
@apply默认不展开嵌套（如@apply hover:bg-blue-500），需手动开experimental.optimizeUniversalDefaults - 响应式类如
md:text-2xl必须显式写出，不能只写text-2xl指望 JIT 自动补变体 - 兜底方案是
safelist，但别写['text-*']—— 改用[/^text-(sm|md|lg)-\d+$/]，避免白名单抵消 JIT 优势
真正卡住热更新的，往往不是某一行代码写错了，而是 JIT 在某个环节“失明”了：它看不见你写的 class，就只能反复做无意义的全量工作。验证是否 JIT 生效，永远比调优构建参数优先级更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
