根本原因是SSR与客户端水合样式断层导致FOUC；PostCSS插件顺序错误（tailwindcss须在autoprefixer前）、content路径漏扫、JS注入延迟及暗色模式初始化过晚共同引发“闪一下”问题。
根本不是 Tailwind 写错了类名，而是 SSR 渲染和客户端水合之间存在样式生成断层——页面先无样式渲染，JS 加载后才补上 CSS，这 100ms 就是“闪一下”的全部来源。
PostCSS 插件顺序错位导致类名直接丢失
开发时看着正常，build 后部分 hover:scale-105、group-hover:text-blue-600 消失，本质是 tailwindcss 插件没在 autoprefixer 前运行，动态类被截断。
-
postcss.config.js中插件顺序必须为：{ 'tailwindcss': {}, 'autoprefixer': {} }，不能颠倒，也不能插入postcss-preset-env等中间插件 - 改完配置后，
.next/cache/postcss/不会自动清空，必须手动删掉，否则缓存继续生效 - CI/CD 构建前加
rm -rf .next/cache/postcss，避免旧缓存污染
content 路径没覆盖所有 JSX 文件，JIT 扫不到类名
Tailwind 不是“运行时解析”，它靠构建时静态扫描 content 列出的文件提取类名。漏扫 = 类名不进 CSS 文件 = 页面加载瞬间白板。
- Next.js App Router 下，
app/**/*.{ts,tsx}和components/**/*.{ts,tsx}必须显式分开写，不能只靠**/*.tsx - 动态导入组件如
dynamic(() => import('./Chart'))，其源文件路径也得出现在content里，否则 tree-shaking 会删掉整块 CSS - 用
npx tailwindcss --watch手动验证：改一个新类（如bg-emerald-500），看终端是否实时输出新增规则；不输出说明路径漏了
JS 驱动方案或 CDN 引入时没加 loading 兜底
用 unocss、tailwindcss-jit 或 CDN 加载 Tailwind，页面初始必然无样式。不能等 JS 执行完再渲染，得主动压制 FOUC。
- 在
head中内联 CSS：.loading body { visibility: hidden; }（不用display: none，避免影响 SEO） - JS 中监听
load事件移除 class：window.addEventListener('load', () => document.documentElement.classList.remove('loading')) - 必须加 3 秒超时兜底：
setTimeout(() => document.documentElement.classList.remove('loading'), 3000)
暗色模式切换逻辑放错位置，首屏“闪白”
不是 dark:bg-gray-800 没生效，而是 document.documentElement.classList.add('dark') 执行太晚——浏览器已按默认主题渲染完首屏，JS 才补上类。
- 初始化脚本必须内联在
head的<script></script>标签中，不能抽成外部文件，不能加defer或type="module" - 代码要带
try/catch：SSR 环境下window未定义，不捕获会直接报错中断 - 别用
localStorage.getItem('theme') === 'dark'直接判断——未存过时返回null，应写成saved === 'dark' || (saved !== 'light' && prefersDark)
最难调的是多个问题共存：PostCSS 顺序错 + content 漏扫 + JS 注入延迟，现象全是“闪一下”，但根因不同。先清缓存、再验 content、最后看 JS 执行时机，一步都不能跳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
