Tailwind JIT模式比传统AOT快，因为它在保存文件时按需生成CSS规则，而非构建时预编译所有类；文件体积更小、热重载更快、开发响应近乎实时，但需正确配置content路径且不支持动态类名拼接。
Tailwind JIT模式为什么比传统AOT快
因为JIT不是在构建时预生成所有类，而是在你写HTML时才按需生成对应CSS规则。传统AOT会把text-sm、text-md、text-lg全编出来，哪怕你只用了一个；JIT只编你实际写的那几个——文件体积小、热重载快、开发时样式响应几乎是实时的。
但注意：JIT不是“运行时编译”，它仍发生在构建阶段，只是编译时机延后到你保存文件那一刻，且只扫描源码中出现的类名。
- 必须确保
content配置项准确指向所有含Tailwind类的模板/组件路径，漏了就编不出来 - 不支持动态拼接类名，比如
class="text-${size}"或className={`p-${padding}`}，JIT无法静态分析，这类会直接丢失 - VS Code里装了Tailwind CSS IntelliSense插件，能高亮未定义类——这是JIT是否生效的第一信号
怎么确认JIT已启用且正常工作
打开tailwind.config.js，检查mode: 'jit'是否显式设置（v3.0+已默认启用，但老项目升级后容易漏掉这行）。更可靠的验证方式是改一个没用过的类，比如临时加个bg-[#1a2b3c]，保存后看浏览器是否立刻渲染出颜色——如果没反应，大概率是content路径没覆盖到当前文件。
-
content值必须是数组，每个字符串用glob语法，例如./src/**/*.{js,jsx,ts,tsx,html} - 若用Vite或Next.js，注意框架可能有自己默认的
content逻辑，和你配置的合并后可能失效，建议显式写全 - 终端启动开发服务时，Tailwind会打印
Using JIT mode提示，没看到就说明没启起来
JIT下自定义颜色/间距等配置为何有时不生效
因为JIT对theme.extend里的值做静态分析，但只认字面量，不认计算或变量引用。比如你在extend.colors里写brand: '#3b82f6'没问题，但写brand: primaryColor（其中primaryColor是外部变量）就会被忽略。
立即学习“前端免费学习笔记（深入）”；
- 所有扩展值必须是字符串、数字、对象字面量，不能是函数调用或导入的常量
- 响应式断点（
sm、md）和伪类（hover:、focus:）无需额外配置，JIT自动支持 - 自定义
@layer规则（如@layer utilities）仍需手动写进CSS文件，JIT不管这些
生产构建时JIT还起作用吗
不起。JIT本质是开发期优化策略，生产构建（npm run build）会走标准AOT流程：扫描content路径，提取所有用到的类，生成最小CSS。所以开发快 ≠ 构建快，构建速度取决于你HTML里实际用了多少类，以及content是否过度宽泛。
- 上线前务必运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify验证输出体积 - 如果生产CSS比预期大很多，大概率是
content配了**/*.js却没排除node_modules或构建产物目录 - JIT不会改变最终CSS结构，所以不影响CSS优先级、层叠或调试体验
真正卡住的地方往往不在JIT本身，而在content配置是否诚实反映你的模板边界——多一个星号，就多扫几百个文件；少一个路径，就少出几十个样式。这事没法靠工具猜，得你亲手对齐。
