JIT真正在运行需终端显示“Using JIT (Just-In-Time) mode”，且npx tailwindcss -v输出v3.x.x；content路径必须精确匹配文件扩展名与目录，环境变量NODE_ENV=development和TAILWIND_MODE=watch缺一不可。
确认JIT是否真在运行
终端启动时必须显示Using JIT (Just-In-Time) mode，否则你只是在用“伪 JIT”。常见假象包括：配置里还留着已废弃的mode: "jit"、装了@tailwindcss/jit包（v3+ 会冲突）、PostCSS 插件写成@tailwindcss/jit而非tailwindcss。运行npx tailwindcss -v，输出必须是v3.x.x；同时检查package.json里没有@tailwindcss/jit残留。
content路径写错 = JIT直接失能
JIT 不扫描代码逻辑，只读content数组里列出的文件内容。路径错一位、扩展名少个x（比如.tsx写成.ts），对应文件里的className=""就全被忽略——结果不是慢，而是样式根本不出现在浏览器里。
- ❌ 错误写法：
"./**/*.{js,ts,jsx,tsx}"—— 扫描node_modules、dist、.git，I/O 拖垮速度 - ✅ 推荐写法：
["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"]；Next.js 还得加"./app/**/*.{js,ts,jsx,tsx}"和"./pages/**/*.{js,ts,jsx,tsx}" - Vue/Svelte/Astro 项目必须显式加上对应扩展名，例如
"./src/**/*.vue"，否则<template></template>或<style></style>里的类名不会被提取 - 用
npx tailwindcss --watch --verbose看终端实际列出了哪些文件，一眼就能发现有没有扫到无关目录
开发时热更新卡顿？大概率是环境变量没对上
JIT 在开发中依赖NODE_ENV=development和TAILWIND_MODE=watch两个信号来启用文件监听。缺一个，每次保存都触发全量重编译，体验接近 v2。
- Vite 用户：脚本里别只写
vite，改成TAILWIND_MODE=watch NODE_ENV=development vite - 某些工具链（如 Craco、Umi）会覆盖
NODE_ENV，显式设TAILWIND_MODE=watch更可靠 - 如果想彻底跳过开发期的监听开销（比如编辑器频繁保存），可临时用
TAILWIND_MODE=build，但仅限调试用，不是常态方案
动态 class 和 @apply 是 JIT 最容易漏的地方
JIT 靠静态分析提取类名，它不执行 JS，也不展开 CSS 变量。所以这些写法会直接失效：
立即学习“前端免费学习笔记（深入）”；
-
className={`text-${color}-500`}——color是运行时变量，JIT 看不到具体值，不会生成任何text-red-500等规则 -
@apply hover:underline默认不生效 —— JIT 关闭了@apply的嵌套解析，除非手动开启experimental.optimizeUniversalDefaults -
md:text-2xl没效果？不是 JIT 坏了，是你源码里没真实写出md:text-2xl这个字符串，只写了text-2xl，JIT 不会自动补响应式变体 - 需要兜底时，
safelist别写['text-*']，改用正则：[/^text-(red|blue)-(500|600)$/]，否则等于放弃 JIT 的按需优势
