tailwind css jit模式下样式不生效主因是content配置错误：必须为覆盖所有含class文件的数组路径，且需匹配真实扩展名与磁盘结构；v3+已废弃mode:'jit'，须确认版本≥3.0.0、无@tailwindcss/jit冲突、postcss插件为tailwindcss，并通过safelist处理动态类名。
Tailwind CSS JIT 模式下样式不生效，基本不是 Bug，而是 content 配置没对——它根本没“看见”你写的类名，自然不会生成对应 CSS 规则。
检查 content 是否为正确格式的数组
Tailwind v3+ 的 JIT 只认 content 字段，且必须是数组；任何字符串、对象、注释掉或留空，都会导致退化为全量构建或完全跳过扫描。
-
content: ["./src/**/*.{js,jsx,ts,tsx,html,vue}"]✅ 正确：显式数组，含常见扩展名 -
content: "./src/**/*.tsx"❌ 错误：字符串，JIT 直接忽略 -
content: { files: ["./src/**/*.tsx"] }❌ 错误：对象结构，v3 不识别 -
// content: [...]❌ 注释掉等于没配，JIT 扫不到任何文件
确认路径是否真实覆盖到写类名的文件
JIT 不执行 JS、不解析 import、不读运行时拼接的字符串，只硬扫磁盘上匹配路径的原始文本。漏一个文件，里面写的 bg-blue-500 就彻底消失。
- Vue 项目漏掉
.vue→ 组件里class="p-4"不进 CSS - React + TSX 漏掉
.tsx或写成.ts→className="text-red-500"被无视 - 静态 HTML（如
public/index.html）没加进content→class="dark:bg-gray-800"变体可能被删 - 用了 MDX、Astro、Lit？得手动补
./src/**/*.mdx、./src/**/*.astro等
排查动态类名是否被静态扫描捕获
JIT 只提取字面量出现的完整类名。像 from-${color}-500 这种插值，构建时看不到 from-blue-500，就不会生成规则。
- 高频动态组合（如
text-red-500/text-green-500）必须进safelist：safelist: ['text-red-500', 'text-green-500'] - 正则需用斜杠包裹：
/text-[a-z]+-500/✅，'/text-[a-z]+-500/'❌（会被当字符串处理） - 变量拼接如
const cls = 'p-4 m-2'; <div classname="{cls}"> → JIT 基本无法识别，只能靠 <code>safelist或重构为字面量 - Angular 的
[ngClass]、Vue 的:class同理，除非模板里直接出现该类名，否则需预声明或加safelist - 运行
npx tailwindcss -v，输出必须是v3.x.x（如v3.4.3） -
package.json中tailwindcss版本必须 ≥3.0.0，且不能同时装@tailwindcss/jit（已废弃，会冲突） - PostCSS 配置里插件必须是
tailwindcss，不是@tailwindcss/jit - 开发时确保环境变量为
NODE_ENV=development或设置了TAILWIND_MODE=watch，否则 JIT 不监听变更
验证是否真在用 v3+ JIT 引擎
很多人以为开了 mode: 'jit' 就是 JIT，其实那是 v2 遗留项，v3 中已废弃——留着它不仅无效，还可能干扰判断。
最容易被忽略的一点：路径里的斜杠方向和大小写必须和磁盘上完全一致。Windows 下写成 .\src\**\*.tsx 会被 fast-glob 忽略；项目用 .jsx 却只配 .js，等于白忙活。JIT 不猜、不推、不兼容——它只按你写的字符串，一字不差地去硬盘上扫。
