jit模式失效主因是content路径配置错误:必须为数组、覆盖所有含class文件、禁用purge字段、移除mode:'jit'残留;路径错漏会导致全量生成而非按需编译。

content路径没写对,JIT就当没看见你写的class
Tailwind v3 的 JIT 模式根本不会读 purge 字段,只认 content 数组。如果这个数组为空、被注释掉、写成字符串或对象,或者路径压根没覆盖到你写 class 的地方,JIT 就会退化为全量生成——你改一个 text-lg,它照样把整个 text-* 工具集都编进去。
-
content必须是数组,例如["./src/**/*.{js,jsx,ts,tsx,html,vue}"],不能是"./src/**/*.js"或{ files: [...] } - 路径开头别用
./—— 某些构建工具(比如旧版 Vite)不识别,统一用src/**/*.{...} - Vue 项目漏掉
.vue,React 项目漏掉.tsx,Svelte 项目没加.svelte,JIT 就扫不到组件里的class或className - HTML 入口(如
public/index.html)也得显式加上,否则dark:、group-hover:这类上下文变体可能被误删
为什么改了JSX里的字符串拼接,样式却不更新
JIT 靠静态扫描提取 class,但像 className={`p-4 ${isActive ? 'bg-blue-500' : ''}`} 这种动态拼接,只有在 content 路径正确且文件被纳入扫描范围时,才能识别出 bg-blue-500。否则它就认为这行 class 没被用过。
- 确保该 JSX 文件路径落在
content数组匹配范围内(比如src/pages/Home.tsx要能被src/**/*.{tsx}匹配到) - 避免写过于宽泛的通配,例如
./**/*.js—— JIT 虽快,但扫描上千个文件仍会卡在 I/O,导致热更新延迟甚至“失灵”感 - 如果用了模板字面量或变量拼接(如
const cls = 'm-2 p-4'; <div classname="{cls}">),JIT 基本无法识别,这类 class 得手动加进 <code>safelist检查是否真在用 v3+ 的 JIT,而不是“伪JIT”
很多人还在
tailwind.config.js里留着mode: 'jit',其实这是 v2 的配置项,v3 中已被移除。保留它不仅无效,还可能是旧配置残留干扰判断。- 运行
npx tailwindcss -v,输出必须是v3.x.x(比如v3.4.3) - 检查
package.json里tailwindcss版本是否 ≥3.0.0,且没有同时安装@tailwindcss/jit—— 这个包已废弃,和 v3 冲突 - PostCSS 插件列表里必须是
tailwindcss,不是@tailwindcss/jit;否则直接绕过 v3 原生 JIT 引擎 - 开发时确保环境变量为
NODE_ENV=development或设置了TAILWIND_MODE=watch,否则 JIT 不会监听文件变化
- 运行











