Tailwind 的 JIT 模式通过按需编译解决打包慢和样式冗余问题：开发时仅生成实际使用的工具类，CSS 体积减少 80%+，热更新更快；需确保 tailwind.config.js 启用 JIT、content 路径全覆盖、避免动态 class 拼接，并正确配置框架集成。
为什么 Tailwind 的 JIT 模式能解决“打包慢+样式冗余”问题
传统 Tailwind 在构建时扫描所有 HTML 文件生成对应 CSS，项目大了就卡顿；而 JIT（Just-in-Time）模式把编译逻辑移到开发阶段，只生成当前用到的类，CSS 体积直降 80%+，热更新也快得多——不是“更快地扫全量”，而是“按需生成”。
关键点：tailwindcss@3.0+ 默认启用 JIT，但必须确认配置没手动关掉。
- 检查
tailwind.config.js是否存在mode: 'aot'（已废弃）或content路径未覆盖实际模板文件 -
content字段必须显式列出所有含 class 的源文件路径，比如['./src/**/*.{js,jsx,ts,tsx,html}']，漏掉就会“找不到类、不生成” - 若用 Vite / Next.js 等框架，确保 PostCSS 插件已加载，且
postcss.config.js中有require('tailwindcss')
如何验证 JIT 是否真在运行
最直接的办法：改一个从未用过的 utility 类（比如 bg-[#ff6b6b]），保存后看浏览器是否立刻生效。如果没反应，大概率是 content 扫描路径没命中，或被 PurgeCSS 旧配置干扰。
- 打开开发者工具 → Elements 面板，搜索该 class 名，确认它出现在
标签里（而非空或被删） - 终端启动时看到
Using JIT (Just-In-Time) mode提示才算真正启用 - 若用的是
tailwindcss@2.x，JIT 是实验性功能，需加--jit参数启动 CLI，且不兼容部分插件
开发中遇到“class 不生效”的常见陷阱
JIT 不是魔法，它严格依赖字符串字面量匹配。动态拼接 class 名（className={`text-${size}-500`}）会导致无法识别，因为扫描器看不到运行时值。
- 避免在 JS 中用模板字符串拼接 utility 类；改用
clsx或条件对象写法：className={clsx({ 'text-sm-500': size === 'sm' })} - 自定义颜色/间距等需在
theme.extend中声明，否则bg-[#abc]这类任意值虽支持，但hover:bg-[#abc]可能失效（JIT 对伪类前缀解析更敏感） - Vite + React 项目中，若组件用
.tsx后缀但content只写了.ts，会漏扫 —— 必须补全.tsx
生产构建仍要走完整流程？别跳过 TAILWIND_MODE=watch
开发用 JIT，生产仍建议用标准构建流程（即不设 TAILWIND_MODE），但 CI/CD 中若想复现开发行为做快速验证，可临时加 TAILWIND_MODE=watch 环境变量强制启用 JIT。
- 这个变量只影响 CLI 行为，对打包工具集成（如 Webpack 插件）无效
- 生产环境禁用 JIT 更稳妥：避免因扫描路径偏差导致漏样式，也防止任意值（
[color]）被误入生产 CSS - 真正要压缩体积，靠的是
purge（v2）或content（v3）配置精准，而不是依赖 JIT 模式本身
最常被忽略的一点：JIT 不改变 CSS 优先级或层叠逻辑，它只是生成策略变了。写错 @layer 顺序、滥用 !important，问题照旧出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
