Tailwind JIT 模式未生成动态拼接类名导致闪烁，因其仅扫描源码中写死的完整字符串字面量，如bg-${theme}-500在构建时不可见，故CSS缺失，页面先无样式后补全；正确做法是用静态条件（如theme === 'dark' ? 'bg-gray-800' : 'bg-white'）或预定义映射对象确保类名可被扫描。
为什么 className 条件拼接会触发闪烁
不是 React 重渲染慢，而是 Tailwind JIT 模式根本没生成对应类名。比如 className={`bg-${theme}-500`} 或 className={`text-${size}`} 这种动态拼接，JIT 扫描器在构建时看不到具体字符串，不会把 bg-blue-500、text-lg 编译进 CSS 文件。页面首次加载时这些类不存在，浏览器回退到无样式状态，等 JS 执行完、React 注入 class 后才“闪”出来。
- 开发环境看着正常，是因为 dev server 启用了 on-demand 类生成（类似“热补丁”），但 build 后完全失效
- 哪怕只漏一个
bg-red-400，对应元素就会瞬间白底黑字再跳成红底白字 - TSX 中用模板字符串 + 变量、
clsx包封装、甚至twMerge都不能绕过这个限制——JIT 不解析运行时逻辑
怎么写才不闪：用静态条件替代字符串拼接
必须让每个可能用到的类名都以字面量形式出现在 JSX 中，Tailwind 才能扫描到并打包进去。
- ✅ 正确写法：
className={theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-gray-900'} - ✅ 多分支也行：
className={size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base'} - ❌ 错误写法：
className={`bg-${theme}-500`}、className={twMerge(`text-${size}`)}、className={clsx('text-', size)} - 如果分支太多，抽成对象映射：
const bgClasses = { dark: 'bg-gray-800', light: 'bg-white' }; className={bgClasses[theme]}—— 对象字面量仍算静态路径
content 路径没覆盖 JSX 文件也会导致条件类丢失
就算你写了静态条件，如果 tailwind.config.js 的 content 字段没包含当前组件所在路径，Tailwind 依然扫描不到这些类名。
- 检查
content是否包含所有 JSX/TSX 文件位置，例如：["./src/**/*.{js,jsx,ts,tsx}"]，不能只写["./src/components/**/*.{js,jsx}"]漏掉pages/或app/ - Next.js App Router 下，
app/**/*.{ts,tsx}和components/**/*.{ts,tsx}必须分开列，不能靠**/*.tsx一网打尽 - 动态导入组件（
dynamic(() => import('./Modal'))）里的条件类，同样要确保其源文件被content覆盖，否则 tree-shaking 会直接删掉整块 CSS
过渡动画本身加剧闪烁感
即使类名存在，用 opacity 或 height 做显隐切换，会在类名生效前/后产生空白帧，放大“闪”的观感。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform替代尺寸变化：比如收起侧边栏，用translate-x-[-100%]而不是h-0 - 避免在条件切换瞬间同时改多个属性，例如
className={open ? 'block opacity-100' : 'hidden opacity-0'}——hidden会立即移除元素，opacity-0失效，造成突变 - 真正平滑的做法是固定显示状态，只动 transform：
className={`transition-transform ${open ? 'translate-x-0' : '-translate-x-full'}`} - 必要时加
-webkit-backface-visibility: hidden（用backface-visibility-hidden类），防止 Safari 下 transform 动画抖动
background-color 或 opacity，如果值是 inherited 或 unset，说明类根本没生成——这时候回去查 content 路径和拼写，比调动画参数更关键。 
