Tailwind CSS v3首次启动更慢是因为JIT需完整扫描content路径下所有文件提取类名并构建初始CSS AST树，这是必要代价；v2的AOT模式省此步但每次构建都处理全部6000+行工具类。
Tailwind CSS v3 构建变快，不是因为“CSS 更少”，而是 JIT 引擎把编译逻辑从「全量预生成」改成了「按需扫描 + 实时生成」——它只处理你真正在 className 里写出来的类，其他一概不碰。
为什么 JIT 模式下首次启动反而更慢？
JIT 首次启动确实比 v2 慢，这不是 bug，是它在干正事：必须完整读取所有 content 路径下的文件，提取静态出现的类名，并构建初始 CSS AST 树。如果你的 content 包含 1500 个 Markdown 文件，它就得打开并解析这 1500 个文件。
- 这不是性能缺陷，而是必要代价；v2 的 AOT 模式靠“一次生成、反复读取”省了这步，但代价是每次构建都处理全部 6000+ 行工具类
- 真正拖慢 JIT 启动的，往往是路径太宽，比如写了
./**/*.js，结果扫了node_modules或构建产物目录里的几千个无关文件 - v3.4+ 加入了文件指纹缓存，后续启动会跳过已解析内容——所以“首次慢”只发生一次，除非你清了缓存或改了文件内容
content 配置写错 = JIT 彻底失效
JIT 不分析 JS 逻辑，只按 content 数组里写的路径去读文件内容。漏配、路径类型写错、通配过宽，都会导致它“看不见”你写的类，最终退化为全量生成（体积常超 2MB）。
- React 项目至少要覆盖：
['./src/**/*.{js,jsx,ts,tsx}']；Vue 项目补上.vue；HTML 入口别忘了./public/index.html -
purge字段在 v3 中已被完全废弃，如果配置里还留着purge: []，Tailwind 会静默忽略它，并回退到不安全的全量模式 - 动态拼接类名（如
className={`text-${color}-500`}）不会被静态分析到，JIT 默认跳过——要么进safelist，要么用@apply封装成静态引用
@apply 在 JIT 下为什么有时不生效？
JIT 的“按需”逻辑基于静态 AST 分析，而 @apply 若引用了未被直接使用的工具类（比如只在 @layer components 里定义、但没在任何模板中显式出现过），JIT 可能根本不会生成其底层规则。
立即学习“前端免费学习笔记（深入）”；
- 常见现象：自定义组件中写
@apply bg-blue-500 hover:bg-blue-600，但页面无背景色——先检查是否在 JSX/HTML 中单独用过bg-blue-500 - 在
@layer utilities里添加的新工具类，若未在content路径下任何文件中显式调用，JIT 不会处理该层 - 解决办法：在
tailwind.config.js的safelist中添加依赖项，或改用theme('colors.blue.500')内联值绕过 JIT 类名解析
最易被忽略的一点：JIT 的“按需”完全依赖 content 路径的准确性。它不会猜、不会推、不会跨文件追踪变量，只认静态字符串里明明白白写出的类名——哪怕只漏一个 .html 或一个 .vue，就可能让整页样式消失。
