Tailwind的JIT模式能明显加快CSS生成，因为它将类名扫描与CSS生成从构建时移至开发时，且仅生成实际使用的类，避免预生成海量冗余变体。
为什么Tailwind的JIT模式能明显加快CSS生成
因为JIT（Just-in-Time）模式把“扫描所有HTML文件 → 提取类名 → 生成对应CSS”这个过程，从构建时提前到了开发时，并且只生成你实际用到的类，而不是像旧版那样预生成全部可能的变体（比如text-5xl到text-9xl、所有bg-opacity-值）。这直接砍掉了大量无用CSS输出和冗余计算。
常见错误现象：开启JIT后反而编译变慢，或热更新卡顿——大概率是content配置路径太宽泛，比如写成"./**/*.{html,js,ts,jsx,tsx}"却没排除node_modules或构建产物目录。
- 确保
tailwind.config.js中content只包含源码路径，例如：["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"] - 禁用不必要的插件（如
@tailwindcss/aspect-ratio若没用到aspect-square等类，就别装） - JIT默认启用，无需额外开关；但
mode: "jit"在v3.0+已废弃，写上反而报错
如何验证JIT是否真正生效
最直接的办法：改一个从未用过的类（比如bg-violet-800），保存后看浏览器是否立刻渲染出效果，同时检查生成的CSS体积是否极小（通常
典型失败场景：用Vite或Next.js等工具链时，content路径没适配其约定结构，导致扫描不到JSX中的类名字符串。
立即学习“前端免费学习笔记（深入）”；
- 在终端运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，观察首次输出耗时（应 - 打开浏览器开发者工具 → Network → 找到CSS请求，看响应头是否有
X-Tailwind-JIT: true（部分版本支持） - 检查
output.css里是否存在大量未使用的md:text-center、hover:scale-105等类——有则说明扫描漏了或配置错
content配置写错会导致JIT完全失效
JIT不扫描代码，它只读content数组里列出的文件内容。路径错一位、扩展名少个x（比如.tsx写成.ts），对应文件里的className="..."就会被无视，结果就是样式丢失，或者回退到全量CSS。
尤其注意框架特定写法：Svelte组件里类名可能在<style></style>块里用@apply，而JIT默认不扫描.svelte文件内的<style></style>——得手动加"./src/**/*.svelte"并确保解析器支持。
- Next.js项目务必包含
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx}（双路由共存时） - Vite + React需确认是否启用了
jsx插件，否则JSX中模板字符串里的类名（className={`${base} ${active ? 'text-blue-500' : ''}`）可能被漏掉 - 避免用
./dist/**/*或./build/**/*这类构建产物路径——它们不是源码，且可能触发无限监听循环
自定义class或@layer规则怎么让JIT识别
JIT不会自动提取@layer components { .btn { @apply py-2 px-4 rounded; } }这种写法里的.btn，也不会理解class="btn"是自定义类。它只认标准的className="text-lg font-bold"这种显式声明。
所以当你写了@layer utilities { .scroll-smooth { scroll-behavior: smooth; } }，又在HTML里用class="scroll-smooth"，JIT会照常工作；但如果你用class="btn"却没在content里任何地方写出这个字符串，它就不会生成.btn的CSS。
- 自定义类必须真实出现在
content指定的文件中（哪怕只是注释：// class="my-card"） -
@apply内部的类会被JIT提取，但前提是这些类本身已被扫描到（比如@apply bg-blue-500 text-white，那bg-blue-500和text-white必须已在其他地方作为字符串出现过） - 动态拼接类名（
className={`text-${size}-sm`}）无法被静态分析，JIT会忽略；需用safe-list兜底，例如在tailwind.config.js中加safeList: ["text-xs-sm", "text-md-sm", "text-lg-sm"]
