tailwind v3构建比v2快，是因为默认启用jit引擎，只生成实际用到的css类，而非v2的aot全量输出；开发热更新更快、生产包体积减少80%+，但需正确配置content路径、移除mode/purge字段并确保无动态类遗漏。
为什么Tailwind v3构建比v2快：JIT不是“更快”，是“不干多余的事”
根本原因不是v3的代码更高效，而是它默认启用 JIT（Just-In-Time）引擎，彻底抛弃了v2的 AOT（Ahead-of-Time）全量生成模式。v2 会不管用不用，硬生生输出约 6000 行工具类；v3 的 JIT 只扫描你 content 路径下的文件，提取出实际写在 HTML/JSX 中的类名（比如 text-red-500、flex），然后仅生成这几条对应 CSS 规则。
这带来两个直接效果：开发时热更新快（毫秒级），生产 CSS 体积小（通常减少 80%+）。但注意：首次启动会稍慢，因为 JIT 需要完整扫描并建立类名索引——这不是性能差，是“一次建表，反复查表”的权衡。
升级到v3后构建仍慢？检查这三处致命配置
绝大多数“升级后还是慢”的问题，其实压根没真正跑上 JIT。验证和修复只需盯住三点：
-
npx tailwindcss -v输出必须是v3.x.x（如v3.4.3），不是v2.x，也不能同时装着@tailwindcss/jit -
tailwind.config.js中必须删掉mode: 'jit'（v3+ 已废弃，留着反而报错或降级）和purge字段（v3 只认content） -
content必须是数组，且路径精准覆盖所有类名出现处：['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']✅；'./src/**/*'或./**/*.js❌（会扫node_modules和dist，I/O 直接卡死）
终端启动时看到 Using JIT (Just-In-Time) mode 才算真正生效。没这行，就是 fallback 全量编译，速度必然不如 v2。
@apply 和动态 className 是 JIT 最容易漏掉的地方
JIT 基于静态 AST 分析提取类名，它看不懂运行时拼接的字符串。这两类写法极易导致样式缺失，且很难定位：
-
@apply若引用的工具类从未在任何模板中显式出现（比如只在@layer components里定义了@apply bg-blue-500，但 HTML 里从没写过bg-blue-500），JIT 就不会生成其底层规则 - 动态拼接如
className={`p-4 ${isActive ? 'bg-blue-500' : ''}`}，JIT 默认不识别bg-blue-500这个分支，需手动加进safelist，或改用theme('colors.blue.500')内联值绕过解析
这类问题不会报错，只会“局部样式消失”，尤其在 HMR（热更新）后更明显——因为 JIT 增量更新依赖的是已知类名集合，漏掉就永远补不上。
要不要直接跳 v4？看你的构建链路是否适配
v4 的 Oxide 引擎（Rust 实现）确实比 v3 快一个数量级：实测增量构建从 44ms → 5ms，无变更重载压到 192µs。但它对构建工具链有强依赖：
- Vite 用户几乎零配置就能享受全部加速，插件自动接管模块图扫描
- Webpack、Next.js app router 等需手动确保
@tailwindcss/postcss或自定义 PostCSS 链路已弃用，否则仍走 JS 版本 - 必须把所有
@tailwind指令换成@import 'tailwindcss'，旧写法静默失效，连 base 层都可能丢
v3 的 JIT 已足够应对绝大多数项目；v4 的优势在超大型代码库或高频编辑场景才真正凸显。升级前先确认你的工具链是否 ready，别为了“更快”引入一堆静默失效的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
