Tailwind CSS首次加载闪烁本质是FOUC，核心解法是内联首屏关键CSS（≤10KB）、确保JIT提取全部类名、预设dark类于HTML渲染前。
Tailwind CSS在Vite项目中首次加载闪烁，基本可以确定是FOUC（无样式内容闪烁），不是Tailwind“慢”，而是关键样式没抢在HTML首次绘制前就位。核心排查点就三个：内联样式是否到位、类名是否真被提取、JS注入时机是否卡在水合之后。
检查关键CSS是否内联且覆盖首屏
浏览器先画HTML，再等CSS加载→必然闪。Vite默认不内联，link引入的Tailwind CSS要走网络+解析+注入三步，首屏样式永远迟到。
- 打开DevTools → Network → 刷新页面，看
styles.css或tailwind.css的加载时间是否晚于document的DOMContentLoaded - 用Coverage tab录制首屏加载，只提取绿色高亮的类（如
.container、.text-lg、.bg-gray-100），手动塞进<style></style>并放在<head>最顶部 - 体积必须≤10KB（gzip前），否则阻塞HTML解析反而更慢；别手写——用
critters插件自动提取：vite-plugin-critters配置后会自动生成内联<style> - 暗色模式类（如
dark:bg-gray-800）也得出现在内联样式里，否则html上没data-theme="dark"时这些规则直接不匹配
验证Tailwind类名是否真被JIT扫描到
动态拼接的类名（如className={`bg-${theme}-500`}）在构建时不可见，JIT不会生成对应CSS，页面加载时只能回退到无样式状态，等JS执行完才“补上”——这就是典型的“闪一下”。
- 检查所有
className是否含模板字符串拼接；必须改用静态条件：theme === 'dark' ? 'bg-gray-800' : 'bg-white' - 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify，看输出CSS里有没有你实际用到的类（比如bg-blue-500）；没有就是content路径漏了 - Vite项目
tailwind.config.js中content字段必须显式包含./src/**/*.{js,jsx,ts,tsx}，不能只写./src/**/*——Vite不识别通配符扩展 - 删掉
node_modules/.vite和dist/，重跑vite build，避免缓存掩盖问题
确认JS是否延迟注入导致主题类丢失
如果用了next-themes或自定义暗色逻辑，但document.documentElement上初始没data-theme，那所有dark:*类都无效，首屏必闪。
立即学习“前端免费学习笔记（深入）”；
- 不要在
useEffect里读localStorage再设data-theme——此时HTML已渲染完毕 - Vite项目没服务端，只能靠内联脚本抢在
<body>渲染前执行：在index.html的<head>里加一段<script>，同步读取localStorage并设document.documentElement.dataset.theme - 确保
tailwind.config.js中darkMode: 'class'开启，且匹配脚本里写的属性名（比如脚本设dataset.theme，配置就得是'class'而非'media'） - 检查
postcss.config.js里tailwindcss是否在autoprefixer之前；顺序错会导致hover:*、group-hover:*等伪类丢失，现象也是“有样式→闪→无样式”
最难调的是多个问题共存：内联样式没覆盖dark:*类、content漏扫导致部分组件无样式、JS又晚一步设data-theme——三者叠加，错误现象完全一样，但根因不同。先清缓存、再验content、最后盯JS执行时序，别跳步。
