根本原因是SSR与客户端水合间样式生成节奏不一致：服务端HTML无Tailwind规则，JS加载水合后才注入，导致FOUC；主要诱因包括PostCSS插件顺序错位（tailwindcss须在autoprefixer前）、content路径未覆盖动态组件、JS驱动方案缺乏loading兜底。
为什么Tailwind CSS加载时会闪烁
根本不是类没写对，而是服务端渲染（SSR）和客户端水合（hydration）之间样式生成节奏不一致。Next.js这类框架在服务端吐出HTML时，Tailwind的CSS规则还没注入；等JS加载、执行、水合完成，样式才补上——中间这段空白就是“闪一下”的来源。常见表现是：首屏文字先无样式显示100ms，再突然套上text-lg、bg-blue-500。
PostCSS插件顺序错位导致类名丢失
Tailwind必须在autoprefixer之前运行，否则@layer、@apply和动态类（比如hover:scale-105）可能被截断或忽略。开发时看着正常，build后部分类直接消失。
- 检查
postcss.config.js中插件顺序是否为：{ 'tailwindcss': {}, 'autoprefixer': {} }，不能颠倒 - 删掉
.next/cache/postcss/目录，否则改完配置也不生效 - CI/CD中build前加
rm -rf .next/cache/postcss
content路径未覆盖动态组件
Tailwind靠扫描content字段列出的文件提取类名。漏掉app/**/*.{ts,tsx}或动态导入组件所处路径，新写的className="dark:bg-gray-800"在build后就找不到对应CSS规则。
- Next.js App Router下，
app/和pages/需显式分开写进content -
dynamic(() => import('./Chart'))这类组件，其路径也得出现在content里 - 用
npx tailwindcss --watch手动验证能否提取到新增类名
CDN或JS驱动方案必须加loading类兜底
如果用unocss、tailwindcss-jit等JS驱动方案，或通过CDN引入，页面初始必然无样式。不能指望JS加载完再渲染，得主动压制FOUC。
立即学习“前端免费学习笔记（深入）”；
- 在
上预设加载状态类 - 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注入时机，别跳步。
