tailwind css v3 jit不热更新的根本原因是jit未真正启用，需确认终端显示“using jit (just-in-time) mode”、npx tailwindcss -v输出v3.x.x、删除mode/purge字段、设置tailwind_mode=watch、content为精准数组路径、postcss插件顺序正确、node.js≥14.18.0，并排除docker inotify失效或动态class拼接等问题。
升级到 Tailwind CSS v3 后 JIT 编译器不热更新，基本就是 JIT 根本没跑起来——不是版本问题，而是环境信号、路径配置或工具链干扰导致它退化为全量重编译。
终端没显示 “Using JIT (Just-In-Time) mode” 就等于没启用
这是最硬的判断依据。没有这行提示，说明你正在用 v3 的包、v2 的流程跑，每次保存都走全量生成。
- 运行
npx tailwindcss -v，输出必须是v3.x.x（如v3.4.3），v2.x或残留@tailwindcss/jit包会强制降级 -
tailwind.config.js中若还存在mode: 'jit'、mode: 'aot'或purge字段，全部删掉——v3+ 已废弃，写了反而报错或禁用 JIT - 启动命令里没显式设
TAILWIND_MODE=watch，尤其在 Craco、Umi、Vite 自定义脚本中，NODE_ENV=development可能被覆盖；加这个变量最稳："dev": "TAILWIND_MODE=watch vite"
content 路径写错 = JIT 失明，不是慢，是“看不见”
JIT 不猜代码在哪，只读 content 数组里写的路径。漏一个文件、错一个扩展名，对应 class 就彻底不进编译流水线。
-
content必须是数组，不能是字符串：['./src/**/*.{js,jsx,ts,tsx}']✅，'./src/**/*.tsx'❌ - Next.js 双路由需同时覆盖：
['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'] - Vite + React 项目若组件用
.tsx后缀，但content只写了.ts，就会漏扫——必须补全.tsx - 避免
./**/*.js这类宽泛写法，它会扫node_modules和dist，I/O 拖垮监听响应 - HTML 入口（如
public/index.html）也要显式加入，否则里面写的 class 就不会被识别
PostCSS 插件顺序错乱或构建工具绕过 JIT 监听
JIT 在开发时依赖构建工具把文件变更事件推过来。插件顺序不对、配置文件多余、或工具链拦截了监听，都会让热更新失效。
- Next.js 用户：**不要写
postcss.config.js**——它会覆盖框架内置配置，禁用 JIT 自动路径推导；真要自定义，确保tailwindcss是第一个插件 - Vite 用户：若禁用了
css.preprocess或自定义了esbuild处理 JSX，JSX 中模板字符串的 class（如className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}）可能被漏掉 - 容器开发（Docker/Dev Container）：inotify 默认不可用，监听器收不到变更信号；加
--poll参数或设TAILWIND_POLL=true - 动态 class 拼接会让 JIT 完全失效：
className={`text-${size}-500`}→ 对应组合类不会生成；改用条件对象或clsx，高频值再考虑safelist
Node.js 版本低于 14.18.0 会导致 JIT 初始化失败
旧版 Node 缺少 glob 高级匹配、fs.promises 稳定支持及 ESM 兼容性，JIT 会静默中断扫描或监听注册失败。
- 运行
node -v，若输出v12.x或v13.x，必须升级；最低安全版本是v14.18.0，推荐v16.20.2或v18.20.2 - 某些 CI 环境（如 GitHub Actions Ubuntu-18.04）自带 Node.js 10，必须显式指定
node-version: '16' - 旧 Node 下
["./src/**/*.{js,jsx,ts,tsx}"]可能错误跳过.tsx文件；可临时拆成多个条目避开 brace expansion，但只是 workaround，不是根治
真正卡住热更新的，往往不是 JIT 本身，而是它根本没收到“文件变了”这个信号——路径漏了、变量没传对、插件排错了、Node 太老，任何一个环节断掉，就退回全量编译。验证方式很简单：改一个从未用过的类（比如 bg-amber-900），保存后看浏览器是否立刻生效，同时终端有没有 watching for changes 提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
