Tailwind CSS 编译慢主因是v3配置残留：须删mode:'jit'、卸载@tailwindcss/jit、确保content为精准数组路径，且npx tailwindcss -v输出v3.x.x、终端显示“Using JIT mode”、PostCSS插件为tailwindcss。
Tailwind CSS 编译慢，基本不是 JIT 没开，而是你正在用 v3 的壳、v2 的配置跑——mode: 'jit' 这行必须删，@tailwindcss/jit 这个包必须卸，content 路径写错一位就等于 JIT 完全失效。
确认你真在用 Tailwind v3+ 的 JIT 引擎
别看配置里有没有 mode: 'jit'，v3.0+ 已彻底移除这个字段，写了反而报错或降级。真正有效的验证方式只有三个：
- 运行
npx tailwindcss -v，输出必须是v3.x.x（如v3.4.3） -
package.json中"tailwindcss"版本 ≥3.0.0，且不能同时存在@tailwindcss/jit -
postcss.config.js里插件必须是require('tailwindcss')，不是require('@tailwindcss/jit')
终端启动开发服务器时，必须看到 Using JIT (Just-In-Time) mode 字样，否则就是 fallback 到全量编译了。
content 路径写错 = JIT 失明，不是变慢，是“假装在 JIT”
JIT 不分析 JS 逻辑，只按 content 数组里写的路径去读文件内容。路径错一个字符、漏一个扩展名、用错格式，它就完全看不见你写的类名。
-
content必须是数组，content: ['./src/**/*.{js,jsx,ts,tsx}']✅，content: './src/**/*.tsx'❌ - Vue 项目要加
./src/**/*.vue；Svelte 加./src/**/*.svelte；Next.js 双路由得同时覆盖app/**/*.{js,ts,jsx,tsx}和pages/**/*.{js,ts,jsx,tsx} - 绝对避免
./**/*.js这种宽泛写法——它会把node_modules、dist、.git全扫一遍，I/O 卡死就是它 - HTML 入口（如
public/index.html）也要显式加入，否则里面写的 class 就不会被识别
构建工具绕过 JIT 监听，热更新就变全量重编
JIT 在开发时依赖文件变更监听来触发增量更新。但 Vite、Webpack、Next.js 等工具链常因环境变量覆盖或 PostCSS 链路中断，导致每次保存都走全量重编译。
-
NODE_ENV=development是必要条件，但不是充分条件；显式加TAILWIND_MODE=watch更可靠，例如："dev": "TAILWIND_MODE=watch NODE_ENV=development vite" - Vite 用户注意：若禁用了
css.preprocess或自定义了 esbuild 处理 JSX，JSX 中模板字符串的类名（如className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}）可能被漏掉 - Webpack 项目检查
postcss.config.js是否正确引入tailwindcss，而非旧包残留
@apply 和动态 class 是 JIT 最容易翻车的地方
JIT 基于静态 AST 分析提取类名，@apply 若引用了未在任何模板中直接出现的工具类，或 JS 中动态拼接（如 className={`text-${color}-500`}），JIT 默认不识别。
- 自定义组件中写
@apply bg-blue-500 hover:bg-blue-600却没生效？先检查是否在任何 JSX/HTML 中单独用过bg-blue-500 - 使用
@layer utilities添加新工具类，却未在content覆盖的任一文件中显式调用，JIT 就不会处理该层 - 动态值必须进
safelist，或改用theme()内联（如background-color: theme('colors.blue.500')）绕过 JIT 解析
最常被忽略的是首次启动耗时偏高——这不是 JIT 慢，是它在认真扫描所有 content 文件并构建初始 AST 树。如果你的 content 里包含上千个 Markdown 或组件文件，那它就得读完这上千个文件。收紧路径、升级到 tailwindcss@3.4+（带文件指纹缓存），比调参数更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
