你猜怎么着？Tailwind CSS JIT模式在修改HTML后没有实时更新，其实根本不是JIT本身的问题。根本原因在于它根本没检测到你修改的文件——根子几乎总是出在content配置或者构建工具的监听链路上。
你需要首先明确一点：JIT只会扫描content数组里明确列出的路径。如果你的HTML文件——比如public/index.html——没有被包含在内，JIT就无法感知你做了任何修改，自然不会重新生成对应的样式。
关键要点在于：content必须是一个数组，不能写成字符串。正确的写法是["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]，千万别写成"./public/index.html"这样的单值形式。路径也要精确匹配实际文件位置，例如在Vite或Webpack项目中，需要显式将public/index.html添加到content中，不能指望./src/**/*自动包含它。此外，静态HTML中使用的变体类（比如dark:*、group-hover:*）依赖于上下文，只有被扫描到的HTML才能保留这些逻辑。
构建工具这个中间人，究竟有没有正常运作？
Tailwind的JIT本身不会监听文件系统，它需要依赖构建工具——Vite、CRACO或Webpack——来传递变更事件。如果这个传递链条断裂，你保存HTML就像对着真空喊话，没人能听到。
- 在Vite项目中，要确保没有禁用
css.preprocess，也不要使用@import方式引入Tailwind CSS，因为那样会绕过Vite的HMR追踪机制。 - 使用Create React App搭配CRACO时，检查
craco.config.js，确认tailwindcss已正确注入PostCSS插件，并且原始的CSS规则处理逻辑保持完整。 - Next.js用户需特别注意：如果使用
app/目录，content必须同时覆盖app/**/*.{js,ts,jsx,tsx,html}和pages/**/*.{js,ts,jsx,tsx,html}，两者缺一不可。
环境变量设置，别忘了花点心思
JIT在开发模式下默认只响应CSS或JS文件的变动，对纯HTML文件的更新没有那么积极。需要显式启用watch模式，否则它会忽略HTML文件的变化。
你可以在启动命令中添加环境变量："dev": "TAILWIND_MODE=watch vite"（非Windows系统）或"dev": "cross-env TAILWIND_MODE=watch vite"（Windows系统）。运行时终端应该能看到Using JIT (Just-In-Time) mode字样，以及watching for changes...提示。注意，这个变量只影响开发服务器，生产构建时会自动忽略。
class名拼接这个小坑，最容易白费功夫
JIT是一个静态扫描器，它不会执行JavaScript，只读取文本。如果你在class属性里写连字符拼接——比如class="text-sm-500"——它不会聪明地拆解成text-sm和500，而是当作一个未知类名直接跳过，连提示都不会给出。
正确的做法是：HTML中class值必须用空格分隔多个类，比如class="text-sm font-bold bg-blue-500"。动态插入的HTML字符串也是如此，例如el.innerHTML = ''，同样要遵守空格规则。这种拼写错误不会报错，只会让对应样式永远无法生成——检查DOM元素的class属性值比查看代码更容易发现问题。
总而言之，真正阻碍JIT正常工作的从来不是“是否需要watch”，而是“它知道该watch什么”。路径遗漏一个、环境变量少写一个、空格错位一个，都会让JIT默默地编译全量CSS，同时假装自己一切正常。不要被表面现象迷惑。绕过这些常见陷阱，更新就会如约而至。
