Tailwind首屏闪屏主因是CSS类名延迟注入，而非框架本身慢；必须内联关键样式、预设dark类并预加载背景图。
为什么Tailwind CSS首屏会闪
根本不是Tailwind“慢”，而是它生成的CSS类名（比如bg-gray-800、text-white）在HTML渲染完成之后才注入到DOM里。浏览器先用无样式HTML画出白底黑字，等React水合完、JS执行完、document.documentElement.classList.add('dark')跑完，样式才生效——中间几十毫秒就是闪屏窗口。
必须内联关键CSS，不能只靠
靠<link rel="stylesheet" href="/styles.css">永远救不了首屏：它要走网络请求、解析、注入三步，任何一环延迟都会FOUC。真正可控的只有内联。
-
<style></style>标签必须塞进，且内容是真实首屏用到的类（如.hero、.header、.btn-primary），不是整个Tailwind - 体积控制在10KB以内（gzip前），否则反而阻塞HTML解析
- 别手写——用
critters（Vite）、next-fonts或Next.js App Router内置的generateMetadata+inline方案自动生成，否则维护成本爆炸
darkMode: 'class'必须配对next-themes和内联脚本
如果用了暗色模式，光在组件里用useTheme()没用。浏览器首次绘制时上根本没有dark类，bg-gray-900这种类就匹配不到。
- 删掉项目根目录的
postcss.config.js——它会禁用Tailwind JIT，导致全量CSS注入变慢 -
tailwind.config.js里确认darkMode: 'class'开启，且content包含app/layout.tsx - 在
app/layout.tsx的里加内联脚本：(function() { const saved = localStorage.getItem('theme'); if (saved) { document.documentElement.dataset.theme = saved; } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.dataset.theme = 'dark'; } })();
滚动中背景图闪？和Tailwind无关，但常被误判
这不是Tailwind的问题，但很多人把滚动时背景图突然出现/消失当成“Tailwind闪”。实际是容器没预留高度+图片没预加载。
立即学习“前端免费学习笔记（深入）”；
- 用
aspect-ratio: 16 / 9固定宽高比，禁用height: auto或flex: 1覆盖它 - 切换背景图前，必须用
new Image().src = 'path.jpg'预加载，路径要和CSS里url()完全一致（含CDN域名、hash） - 避免在
scroll事件里直接改element.style.backgroundImage——改用class切换，配合预加载完成状态
dark类塞进
