Tailwind CSS JIT模式不监听动态HTML，只扫描源码中显式写出的class字符串；需确保content为包含HTML路径的数组、启用TAILWIND_MODE=watch、避免class拼写错误，并通过safelist预声明动态类名。
Tailwind CSS JIT 模式本身不监听动态 HTML（比如 DOM 插入、innerHTML 更新、JS 拼接的 class 字符串），它只扫描构建时存在的源码文本——所以你改完 HTML 文件却没更新，不是“监听失效”，而是根本没被扫描到。
content 配置必须显式包含所有 HTML 文件路径
JIT 不会自动递归扫描 public/ 或 dist/ 下的 HTML；它只看你 tailwind.config.js 里 content 数组写了什么。
- ✅ 正确写法：
content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html", "./src/pages/**/*.html"] - ❌ 错误写法：
content: "./public/index.html"（字符串非数组，JIT 直接忽略） - ❌ 错误写法：
content: ["./dist/**/*.html"]（构建后生成的 HTML 不参与 JIT 编译） - 若用 Vite + SSR 或静态生成（如 Astro、11ty），确保
.html后缀在 glob 中，且路径实际存在（比如./src/templates/*.html）
动态插入的 class 字符串不会被 JIT 提取
你在 JS 里执行 el.className = "text-blue-500 bg-red-200" 或 el.setAttribute("class", "p-4 rounded-lg")，这些 class 不会被扫描——因为它们不在源码中作为字面量出现。
- JIT 只分析
class="..."属性值、className={...}中的字符串字面量、tw`...`模板字符串 -
className={`text-${color}-500`}→ 扫描器看到的是text-${color}-500，不是text-blue-500，不会生成规则 - 想让运行时插入的类生效，唯一办法是提前把可能用到的完整类名加进
safelist，例如：safelist: ['text-blue-500', 'bg-red-200', /^p-\d+$/, /^rounded-\w+$/] - 正则必须匹配完整类名，
/p-.*/太宽泛，会引入大量无用 CSS
构建工具链必须把 HTML 更改事件推给 Tailwind
JIT 不自己监听文件系统，它靠 Vite / Webpack / CRACO 等把变更通知过来。HTML 修改后没反应，大概率是这层断了。
- Vite 项目：确认没禁用
css.preprocess，且 Tailwind 是通过@tailwind指令引入的，不是@import（后者绕过 HMR） - Create React App + CRACO：检查
craco.config.js中postcss.plugins是否包含tailwindcss，且未过滤掉原始 CSS 规则 - Next.js app router：
content必须同时覆盖app/**/*.{js,ts,jsx,tsx,html}和pages/**/*.{js,ts,jsx,tsx,html} - 启动命令需加
TAILWIND_MODE=watch（Windows 用cross-env TAILWIND_MODE=watch），否则 JIT 默认跳过 HTML 文件监听
class 属性拼写错误会让 JIT “视而不见”
哪怕路径和监听都对，一个空格或连字符错位，就导致整段 class 不被识别。
- ❌
class="flexitems-center"→ 浏览器当做一个类flexitems-center，JIT 扫不到flex和items-center - ❌
class="md:text-lgsm:font-bold"→ 缺空格，变成md:text-lgsm:font-bold，无效 - ❌
class="text-sm-500"→ JIT 不拆解连字符，不会当成text-sm和500，也不会生成text-sm-500（除非你自定义了该颜色） - ✅ 正确做法：用 ESLint 插件
eslint-plugin-tailwindcss或 VS Code 插件Tailwind CSS IntelliSense实时标红错误拼写
最常被忽略的一点：safelist 增删后必须重启开发服务器，JIT 的缓存不会自动刷新；哪怕只是改了一行正则，也要 Ctrl+C 再 npm run dev。否则你写的 text-emerald-600 永远不会出现在最终 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
