Tailwind v3 JIT模式根本不存在“缓存失效”，其核心是静态扫描+文件监听驱动增量更新；终端未输出“Using JIT (Just-In-Time) mode”即未启用，需确认v3.x版本、删除mode/purge配置、显式设TAILWIND_MODE=watch、content为精准数组路径、避免动态拼接及PostCSS链路中断。
Tailwind v3 的 JIT 模式根本不存在“缓存失效”这个概念——它压根不依赖传统意义上的构建缓存，而是靠静态扫描 + 文件监听驱动增量更新。所谓“缓存失效”，95% 是 JIT 根本没启用，或 content 路径漏扫、环境变量错位，导致每次保存都触发全量重编译，看起来像“缓存丢了”。
终端没输出 “Using JIT (Just-In-Time) mode” 就等于没启动
这是唯一硬性判断标准。没有这行日志，其他优化全是空谈。
- 运行
npx tailwindcss -v，必须输出v3.x.x（如v3.4.3）；若为v2.x或显示@tailwindcss/jit，立刻卸载：npm rm @tailwindcss/jit -
tailwind.config.js中所有mode: 'jit'、mode: 'aot'、purge字段必须删干净——v3+ 已废弃，残留即禁用 JIT - 启动命令必须显式设
TAILWIND_MODE=watch，尤其在 Craco、Umi、自定义 Vite 脚本中："dev": "TAILWIND_MODE=watch vite"（Windows 用cross-env）
content 路径写错 = JIT 失明，不是慢，是“假装在 JIT”
JIT 不猜代码在哪，只读你写的路径数组。漏一个文件、错一个扩展名，对应类名就彻底消失。
-
content必须是数组，不能是字符串：['./src/**/*.{js,jsx,ts,tsx,vue}']✅，'./src/**/*.tsx'❌ - Vue 项目要加
.vue，Next.js 双路由需同时覆盖：['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'] - HTML 入口（如
public/index.html）必须显式列出，否则里面写的class="text-red-500"JIT 根本看不到 - 绝对避免
./**/*.js这种宽泛写法——它会扫node_modules和dist，I/O 卡死就是它
动态 className 拼接会让 JIT 完全跳过该组合
JIT 是静态分析器，不执行 JS。模板字符串里带变量，等于告诉编译器：“这部分我不管”。
-
className={`text-${color}-600`}→ 编译器只看到text-${color}-600，提取不到text-red-600，CSS 规则不生成 - 正确做法是预定义完整类名对象：
const themeClasses = { error: 'text-red-600 bg-red-50' }，然后className={themeClasses[status]} - 若真需支持不可穷举的值（如用户输入 hex），才用
safelist配正则：{ pattern: /bg-\[#([0-9A-F]{6}|[0-9A-F]{3})\]/ }，且必须是对象形式，字符串写法无效
Vite/Next.js 环境下容易被忽略的链路中断点
框架封装可能绕过 PostCSS 流程，导致 JIT 监听器收不到变更信号。
- Next.js 用户：删掉项目根目录的
postcss.config.js——它会覆盖内置插件顺序，禁用 JIT 自动推导 - Vite 用户：检查是否禁用了
css.preprocess，或用 esbuild 处理 JSX 时漏掉了模板字符串里的className - Docker / Dev Container：默认 inotify 不可用，加
--poll参数或强制TAILWIND_MODE=watch - Vite 首次加载卡顿？在
vite.config.ts的optimizeDeps.include中加入：['tailwindcss', 'postcss']
真正卡住 JIT 的，从来不是缓存机制，而是 content 路径有没有覆盖到那个写了 className 的 .tsx 文件，以及环境变量有没有让监听器真正跑起来——这两点不对，再调内存、加缓存都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
