JIT模式提速核心在于开发时按需生成CSS：content路径必须精准覆盖所有含class文件（如["./src/*/.{js,jsx,ts,tsx}"]），漏配或宽泛扫描会导致失效；动态类名（如className={p-${padding}》）无法静态识别，需safelist预声明；@apply依赖的工具类若未在模板中直接使用，JIT可能忽略。
因为 JIT 模式把“生成什么 CSS”这件事从构建时挪到了开发时，并且只生成你真正写在模板里的类——改个 text-lg 保存即生效，不用等全量编译，也不用担心 CSS 文件爆炸。
content 配置错，JIT 就等于没开
JIT 不是自动扫描整个项目，它只读 tailwind.config.js 里 content 数组明确列出的路径。漏配、写错扩展名、路径太宽泛，都会让 JIT 失效：
-
["./src/**/*.{js,ts}"]→ 漏了jsx和tsx，React 组件里的className全部不被识别 -
["./**/*"]→ 扫到node_modules和dist，I/O 拖慢热更新，还可能误解析压缩代码 - 正确写法应像：
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]，Svelte 项目还得加"./src/**/*.svelte"
动态拼接类名，JIT 看不见
JIT 基于静态 AST 分析，对运行时拼接的字符串无能为力：
-
className={`p-${padding}`}或class="text-${size}"→ JIT 不知道padding最终是4还是6，不会生成对应规则 - 结果：样式丢失，浏览器控制台不报错，排查困难
- 替代方案：
safelist: ['p-4', 'p-6', 'text-sm', 'text-lg']显式声明；或改用@apply封装进组件，或用theme('spacing.4')内联值绕过类名解析
@apply 在 JIT 下有时不生效
@apply 的底层依赖工具类是否被 JIT “看到”。如果某个类只出现在 @apply 里，没在任何 HTML/JSX 中直接使用，JIT 可能跳过它：
立即学习“前端免费学习笔记（深入）”；
- 比如
@apply bg-blue-500 hover:bg-blue-600，但项目里从未单独写过bg-blue-500→ JIT 不生成该背景色规则 - 自定义
@layer utilities添加的新工具类，若未在content路径下任何文件中显式出现，也不会被处理 - 解决办法：在
safelist中添加依赖项，或确保基础工具类至少在某处被直接调用一次
JIT 的提速效果不是魔法，它高度依赖你写的类名是否可静态提取——写得越直白（md:flex），它越快；写得越动态（class={dynamicClass}），它越容易掉链子。真正省下的时间，来自你不再盯着构建日志等 30 秒，而是改完保存就看到效果。
