根本原因是PostCSS插件顺序错误，必须为tailwindcss→autoprefixer，否则@layer、@apply及hover等动态伪类规则在构建后被截断，导致上线样式丢失。
根本不是类名写错了，而是服务端没输出样式、客户端水合后才注入——FOUC 必然发生，除非你主动打断这个节奏。
PostCSS 插件顺序必须是 tailwindcss 在 autoprefixer 之前
Tailwind 的 @layer、@apply 和动态伪类（如 hover:scale-105）依赖在 Autoprefixer 之前完成解析。顺序颠倒会导致 build 后规则被截断，开发时正常、上线就丢样式。
- 检查
postcss.config.js中插件顺序是否严格为：'tailwindcss': {}, 'autoprefixer': {} - 删掉
.next/cache/postcss/目录，否则改完配置也不生效 - CI/CD 构建前加
rm -rf .next/cache/postcss/，避免缓存污染
content 字段必须覆盖所有动态组件路径
Tailwind 不扫描 node_modules，但会按 content 列出的路径提取类名。漏掉 app/**/*.{ts,tsx} 或 dynamic(() => import('./Chart')) 所在目录，对应类名就不会进 CSS 文件，首屏必然闪。
- Next.js App Router 下，
app/和components/路径需显式分开写进content，不能靠**/*.tsx模糊匹配 - 用
npx tailwindcss --watch手动验证：改一个新类名（如bg-teal-400），看是否立即出现在生成的 CSS 中 - 动态导入组件的源文件路径也得出现在
content里，否则 tree-shaking 会直接删掉整块 CSS
JS 驱动方案或 CDN 引入必须加 loading 类兜底
用 unocss、tailwindcss-jit 或 CDN 加载 Tailwind 时，HTML 初始无任何样式规则。不能等 JS 执行完再渲染，得提前压制 FOUC。
立即学习“前端免费学习笔记（深入）”；
- 在 HTML
<head>中预设loading类：<body class="loading"> - CSS 中写：
.loading body { visibility: hidden; }（不用display: none，避免 SEO 影响） - JS 里监听
window.addEventListener('load', () => document.documentElement.classList.remove('loading')) - 务必加 3 秒超时兜底：
setTimeout(() => document.documentElement.classList.remove('loading'), 3000)
最难调的是多个问题共存：PostCSS 顺序错、content 漏扫、JS 加载延迟，现象完全一样——都是“闪一下”。先清缓存、再验 content、最后看 JS 注入时机，别跳步。
