Tailwind CSS 在 Next.js 14 中实为构建时处理，并非运行时生成；所谓“慢”源于 JIT 编译扫描效率，核心问题在于热更新延迟、终端无提示及类名丢失，需通过修正配置、确保 content 路径完整、禁用干扰插件及合理处理动态 class 来优化。
Tailwind CSS 在 Next.js 14 中的“运行时生成”其实并不存在——它全程是构建时（build-time）处理，所谓“慢”或“卡”，本质是 JIT 编译阶段扫描、匹配、生成 CSS 的效率问题。真正影响开发体验的，是热更新延迟、终端无提示、类名丢失这三类现象。
确认 JIT 是否真在运行
Next.js 14 默认启用 Tailwind JIT，但极易被配置干扰而退化为全量扫描：
- 检查
tailwind.config.js是否还残留mode: 'aot'或已废弃的purge字段——有则必须删掉 -
content字段必须显式覆盖所有含 class 的路径，例如：['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']；漏掉app/layout.tsx或lib/ui/Button.tsx就会导致对应类不生成 - 启动 dev server 后，终端必须出现
Using JIT (Just-In-Time) mode—— 没这行说明 JIT 被禁用，常见于手动写了postcss.config.js并覆盖了 Next.js 默认插件顺序
避免 postcss.config.js 干扰插件链
Next.js 自带 PostCSS 配置，tailwindcss 插件由框架自动注入且顺序正确。手动加 postcss.config.js 是多数性能倒退的根源：
- 若无需自定义 autoprefixer 或 cssnano，**完全不要创建
postcss.config.js** - 若必须添加，确保
tailwindcss是第一个插件，autoprefixer第二，cssnano（仅生产）放最后 - 禁用
cssnano的discardComments和normalizeWhitespace，否则动态类匹配会失效（如text-${size}-500）
处理动态 class 导致的“类名消失”
JIT 扫描器只识别字符串字面量，无法解析模板字符串拼接，这不是“慢”，是压根不生成：
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
className={`text-${size}-500`}→text-sm-500等组合类不会出现在最终 CSS 中 - 静态 fallback：
className={size === 'sm' ? 'text-sm-500' : size === 'lg' ? 'text-lg-500' : 'text-xl-500'} - 正则白名单兜底：在
tailwind.config.js的safelist中声明高频组合，例如：safelist: [/text-(sm|md|lg|xl)-500/, /bg-\[.*\]/] - 禁止把 JSX 提取到
lib/utils.ts这类非 content 扫描路径中返回 class 字符串——JIT 扫不到
最常被忽略的一点：所谓“运行时生成”是误解，Tailwind 从不往浏览器里塞 JS 来动态插入样式。一切都在构建期完成，问题只出在扫描范围、插件顺序、动态拼接这三处。修好它们，热更新延迟就会从 3–5 秒降到 300ms 内。
