Tailwind CSS 编译慢主因是 content 配置错误导致 JIT 无法识别 class：需确认 v3+ 版本、删除 mode:'jit' 和 @tailwindcss/jit、content 必为精准路径数组、设置 TAILWIND_MODE=watch，并避免动态 class 拼接。
Tailwind CSS 编译慢，大概率不是 JIT 没开，而是它根本没“看见”你写的 class —— 根源几乎总在 content 配置上。
确认你真在用 Tailwind v3+ 的 JIT，而不是旧配置残留
很多人改了 mode: 'jit' 就以为搞定了，其实这个字段在 v3.0+ 已被移除，写上反而会报错或强制降级。真正有效的判断方式只有两个：
- 运行
npx tailwindcss -v，输出必须是v3.x.x（比如v3.4.3） - 启动开发服务器时终端明确打印
Using JIT (Just-In-Time) mode - 删掉项目里还存在的
@tailwindcss/jit包——它只属于 v2 时代，和 v3 冲突
content 路径写错 = JIT 失明，不是变慢，是“假装在 JIT”
JIT 不扫描代码逻辑，只按 content 数组里写的路径去读文件内容。路径错一位、扩展名漏个 x（比如 .tsx 写成 .ts），对应文件里的 className 就完全看不见。
-
content必须是数组，不能是字符串或对象：content: ['./src/**/*.{js,jsx,ts,tsx}']✅，content: './src/**/*.tsx'❌ - Vue 项目要加
./src/**/*.vue；Svelte 要加./src/**/*.svelte（默认不扫<style>块里的@apply） - Next.js 双路由共存时，得同时覆盖
app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx} - 避免
./**/*.js这类宽泛写法——它会把node_modules、dist、.git全扫一遍，I/O 卡死就是它
构建工具干扰：Vite/Next.js/Webpack 可能悄悄关掉了 JIT 监听
JIT 在开发时依赖文件变更监听来触发增量更新。但很多工具链会覆盖环境变量或跳过 PostCSS 插件链，导致每次保存都走全量重编译。
立即学习“前端免费学习笔记（深入）”；
- 确保
NODE_ENV=development，更稳妥加TAILWIND_MODE=watch（比如"dev": "TAILWIND_MODE=watch vite"） - 检查
postcss.config.js中插件是require('tailwindcss')，不是require('@tailwindcss/jit') - Vite 用户注意：若禁用了
css.preprocess或自定义了esbuild处理，可能意外切断依赖追踪 - Next.js 项目中，若组件用
.tsx后缀但content只写了.ts，会漏扫 —— 必须补全.tsx
动态拼接 class 名是 JIT 最常见的失效点
JIT 不是运行时编译器，它只做静态 AST 分析。像 className={`text-${size}-500`} 这种写法，扫描器看不到运行时值，就不会生成对应规则。
- 避免在 JS 中用模板字符串拼接 utility 类
- 改用
clsx或条件对象：className={clsx({ 'text-sm-500': size === 'sm' })} - 如果必须动态，进
safelist显式声明，例如safelist: ['text-sm-500', 'text-lg-500'] -
@apply若引用了未在任何模板中显式出现的工具类（比如只在@layer components里定义），JIT 可能跳过生成 —— 解决办法是在safelist加依赖项，或改用theme()函数内联值
最常被忽略的一点：JIT 首次启动确实比 v2 慢，因为它要完整扫描所有 content 文件并构建初始 AST 树。这不是 bug，是必要代价；优化方向永远是收紧路径，而不是怀疑 JIT 本身。
