Tailwind CSS v3 默认启用 JIT 模式，无需且不可配置 mode: 'jit'；需确认版本 ≥3.0.0、移除 @tailwindcss/jit、正确设置 content 数组路径、保证 NODE_ENV=development 或 TAILWIND_MODE=watch，并注意 @apply 和动态 class 的使用限制。
Tailwind CSS v3 默认启用 JIT 模式，无需手动设置 mode: 'jit' —— 如果你还在加这行配置，说明你可能没升级到 v3 或配置被旧版残留干扰。
确认是否真在用 Tailwind v3+ 的 JIT
很多人以为开了 mode: 'jit' 就是 JIT，其实 v3 后这个字段已被移除。真正判断依据是：
- 检查
package.json中tailwindcss版本是否 ≥ 3.0.0（如"tailwindcss": "^3.4.3"） - 运行
npx tailwindcss -v输出应为v3.x.x - 若仍用
@tailwindcss/jit包，立刻删掉 —— 它是 v2 时代的过渡包，与 v3 冲突，会导致编译变慢甚至失效 - PostCSS 插件列表里必须是
tailwindcss，不是@tailwindcss/jit；否则会绕过 v3 的原生 JIT 引擎
content 配置错误导致 JIT “失明”
JIT 不再认 purge 字段，改用 content。写错路径或遗漏类型，JIT 就无法扫描到 class 使用，结果就是：开发时样式不生效、热更新延迟、甚至回退到全量生成。
-
content必须是数组，不能是字符串或对象 - 路径要覆盖所有可能写 class 的地方：
./src/**/*.{js,jsx,ts,tsx,vue}+./public/index.html（如果用 HTML 入口） - Vue SFC 中的
<template></template>、React JSX/TSX 的className、甚至 JS 字符串拼接（如className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}）都依赖正确content才能被识别 - 避免通配过宽，比如
./**/*.js会拖慢扫描 —— JIT 虽快，但文件太多仍卡在 I/O
开发服务器启动时 NODE_ENV 和 TAILWIND_MODE 的坑
开发环境编译慢，常因监听机制没生效。v3 JIT 依赖正确的环境信号来决定是否开启文件变更监听。
立即学习“前端免费学习笔记（深入）”；
-
NODE_ENV=development是必要条件，但不是充分条件 —— 某些构建工具（如 Craco、Vite 插件）会覆盖它 - 显式加
TAILWIND_MODE=watch更可靠，尤其在自定义脚本中："dev": "TAILWIND_MODE=watch NODE_ENV=development vite" - 如果用了
TAILWIND_MODE=build或没设，JIT 会跳过监听，每次保存都触发完整重编译，体验接近 v2 - Vite 用户注意：v4.3+ 默认已适配 JIT 监听，但若禁用了
css.preprocess或自定义了esbuild处理，可能意外切断依赖追踪
@apply 和动态 class 在 JIT 下的边界行为
JIT 对 @apply 和运行时拼接 class 的支持有明确限制，越界就会“漏样式”，表现为局部样式消失、HMR 失效或构建后缺失。
-
@apply只能用于已知类名：比如@apply bg-blue-500 text-white可以，但@apply bg-${color}-500（模板字符串）不行 - 动态 class 如
className={`text-${size}-sm`}，JIT 默认不处理 —— 必须在content中显式声明可能值，例如加一行'./src/constants/tailwind-sizes.js'，里面导出['sm', 'md', 'lg'] - 任意值语法（
rounded-[12px]）默认支持，但若用了非常规单位（如h-[calc(100vh-80px)]），需确保该字符串完整出现在某个content文件里，否则不会生成 - 插件生成的 class（如
@tailwindcss/forms）必须在plugins数组中正确注册，否则 JIT 不知道它们的存在
最常被忽略的是：JIT 的“快”建立在精准的文件扫描之上。路径配错、环境变量漏传、或误信旧文档里的 purge 和 @tailwindcss/jit，都会让 JIT 形同虚设——表面开着，实际在后台默默编译 MB 级 CSS。
