热更新失效主因是JIT未启用——终端无“Using JIT (Just-In-Time) mode”提示，需清除过时配置、校验content路径数组、避免动态className拼接，并确保PostCSS插件顺序正确。
热更新失效，基本就是 JIT 模式没真跑起来——不是 Tailwind 慢，是它压根没在监听文件变化。
终端没显示 “Using JIT (Just-In-Time) mode”
这是最硬的判断依据。没这行，说明 JIT 被禁用或插件链中断，每次保存都触发全量重编译。
- 检查
tailwind.config.js是否还残留mode: 'aot'、mode: 'jit'或已废弃的purge字段——全部删掉 - 运行
npx tailwindcss -v，确认输出是v3.x.x；v2 或带@tailwindcss/jit的旧包会退化 - Next.js 13.4+ 不要手动写
postcss.config.js，它会覆盖内置插件顺序；删掉根目录下这个文件（哪怕空）
content 路径漏配或写错
JIT 不猜代码在哪，只按 content 数组里写的路径去扫描。漏一个文件，那个文件里的 className 就不会进构建流水线。
- App Router 必须含
"./app/**/*.{js,ts,jsx,tsx,mdx}"；Pages Router 必须含"./pages/**/*.{js,ts,jsx,tsx}" - 组件在
src/components？就得加"./src/components/**/*.{js,ts,jsx,tsx}"，不能只写./components -
content必须是数组，不能是字符串：["./app/**/*.{ts,tsx}"]✅，"./app/**/*.tsx"❌ - 避免
./**/*.js这类宽泛写法——它会扫node_modules和dist，I/O 拖垮监听响应
动态 className 拼接让 JIT 完全“看不见”
JIT 是静态分析器，只识别字符串字面量。模板字符串一出现，对应组合类就从生成结果里消失，热更新时既不新增也不更新。
- ❌
className={`text-${size}-500`}→text-sm-500不生成 - ✅ 改用条件判断：
className={size === 'sm' ? 'text-sm-500' : 'text-lg-500'} - ✅ 或用
clsx：className={clsx({ 'text-sm-500': size === 'sm' })} - 高频动态值可白名单兜底：
safelist: [/text-(sm|lg|xl)-500/]，但别滥用，否则体积反弹
PostCSS 插件顺序被干扰
Next.js 默认把 tailwindcss 插件排第一、autoprefixer 排第二。手动加了 postcss.config.js 后，顺序极易错乱，导致 JIT 监听被绕过。
- 如果必须保留
postcss.config.js，确保内容只有这四行：module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } -
tailwindcss: {}必须是空对象，不能写成tailwindcss: require('tailwindcss') - 不要加
cssnano、postcss-import等插件——Next.js 已内置压缩逻辑，额外引入可能破坏 CSS 提取顺序
真正容易被忽略的是：所谓“热更新失效”，往往不是某个配置错了，而是多个小问题叠加——比如删了 postcss.config.js 却忘了重启 next dev，或者改了 content 却漏掉了 .mdx 后缀。每改一处，都要验证终端是否打出 JIT 提示，再检查对应文件里的类是否真出现在最终 CSS 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
