Tailwind CSS JIT模式修改HTML后不实时更新的原因

你猜怎么着？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 = '

总而言之，真正阻碍JIT正常工作的从来不是“是否需要watch”，而是“它知道该watch什么”。路径遗漏一个、环境变量少写一个、空格错位一个，都会让JIT默默地编译全量CSS，同时假装自己一切正常。不要被表面现象迷惑。绕过这些常见陷阱，更新就会如约而至。