tailwind css v3.0+ 默认启用 jit 模式，编译速度取决于 content 路径精准性、文件扫描效率及构建工具是否正确支持 jit 监听；需确认版本为 v3.x.x、终端显示 “using jit mode”、删除旧包 @tailwindcss/jit，并避免模板字符串动态 class。
Tailwind CSS v3.0+ 默认启用 JIT 模式，开发编译快慢不取决于“是否开了 JIT”，而取决于 content 路径是否精准、文件扫描是否被拖累、以及构建工具是否意外绕过了 JIT 监听机制。升级到最新版本身不会自动“启用并发模式”——Tailwind 本身不提供线程级并发编译，所谓“快”，是靠减少扫描量 + 正确触发增量更新实现的。
确认你真在用 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: ['./src/**/*.{js,jsx,ts,tsx}']✅，content: './src/**/*.tsx'❌ - Vue 项目要加
./src/**/*.vue；Svelte 要加./src/**/*.svelte（默认不扫<style></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 NODE_ENV=development vite" - Vite 用户注意：若禁用了
css.preprocess或自定义了esbuild处理 JSX，JSX 中模板字符串的类名（如className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}）可能被漏掉 - Webpack 项目检查
postcss.config.js是否正确引入tailwindcss，而非旧包@tailwindcss/jit - Craco、Razzle 等封装工具容易覆盖环境变量，建议直接用原生脚本验证 JIT 是否生效
动态 class 是 JIT 最常踩的坑，不是性能问题，是功能失效
JIT 只识别字符串字面量，text-${size}-500 这种模板字符串永远无法命中，结果就是样式不生成，不是“编译慢”，是“压根没生成”。
- 别在 JSX/TSX 中拼接 utility 类：
className={`text-${size}-500`}❌ - 改用
clsx或对象写法：className={clsx('text-base', { 'text-lg': size === 'lg' })}✅ - 任意值语法（如
bg-[#ff6b6b]）支持，但伪类组合（如hover:bg-[#ff6b6b]）在部分版本解析不稳定，建议提前在theme.extend中声明 -
@apply在<style></style>块中不被扫描（Svelte/Vue），只能放在tailwind.config.js的theme.extend或 CSS 文件里
真正卡顿的点往往不在 Tailwind 本身，而在 content 路径误配导致反复全量扫描、或构建工具切断了 JIT 的监听链路。验证方式很简单：改一个全新类名（比如 bg-violet-900），保存后看浏览器是否立刻生效，再检查生成的 CSS 文件体积是否只有几 KB——如果不是，问题一定出在那几行 content 配置里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
