深色模式动画需配置 darkMode: 'class' 并配合 CSS transition；初始化脚本须内联于 head 中同步设置 dark 类，且 focus/hover 等交互样式需显式添加 dark: 前缀。
darkMode 配置必须是 'class'，否则动画无从谈起
Tailwind 的 dark: 变体本身不带过渡能力——它只是条件开关。想加切换动画，前提是深色模式必须可手动控制，即 darkMode: 'class'。如果配成 darkMode: 'media'，样式随系统偏好瞬时切换，JS 无法干预，自然没法加动画。更常见的是漏写 darkMode 字段，或误写为 darkMode: true，结果所有 dark: 类根本不会生成，连样式都没有，动画更无从谈起。
动画必须靠 CSS transition + class 切换时机配合
Tailwind 不提供内置“深色切换动效”，得自己用 transition 控制属性变化。关键点在于：动画生效的前提是，dark 类加在 document.documentElement 上，且被切换的样式属性（如 background-color、color）本身支持过渡。
- 在
tailwind.config.js的theme.extend.transitionProperty中显式加入要过渡的属性，例如：{ 'background-color': 'background-color', 'color': 'color' } - 全局加基础过渡规则，比如在 CSS 入口文件里写：
html { transition: background-color 0.3s ease, color 0.3s ease; } - 确保用到的
dark:bg-*和dark:text-*对应的颜色值有足够色差，否则看不出过渡效果 - 避免对
opacity或transform等无关属性加过渡，它们不影响主题切换视觉流
避免动画被“闪白”打断
所谓“闪白”，是浏览器先渲染无 dark 类的浅色样式，再执行 JS 加类——这中间没有过渡，只有一帧跳变。即使你写了 transition，也救不回这一跳。所以动画能生效的底线是：类必须在 CSS 解析前就存在。
- 初始化脚本必须内联在
中，不能等DOMContentLoaded，更不能抽成外部文件 - 脚本逻辑要立刻读
localStorage.getItem('theme')或 fallback 到window.matchMedia，然后同步调用document.documentElement.classList.add('dark')或.remove('dark') - 不要用
toggle('dark')初始化——它依赖当前 DOM 状态，而 SSR 渲染时document.documentElement还没加载完，容易出错 - 若用 React/Vue，服务端首次渲染时也要把
dark类通过data-theme或服务端注入方式预置，否则 hydration 会抹掉过渡起点
focus:ring / border 等交互态样式需单独适配
动画不只发生在背景和文字上。用户点击按钮、聚焦输入框时，focus:ring-blue-500 在深色下可能不可见。这类样式默认不继承 dark:，必须显式写成 dark:focus:ring-blue-400 或 focus:dark:ring-blue-400（推荐前者）。
-
focus:ring、hover:border、active:bg这些交互变体，只要涉及颜色，都建议补上dark:前缀 - 别依赖
dark:focus:ring-inset这类纯结构类——它不改颜色，动画中看不见变化 - 某些插件（如
@tailwindcss/forms）生成的默认样式不会自动加dark:，需在tailwind.config.js的plugins中手动扩展
深色模式动画真正难的不是写 transition，而是让整个切换链路——配置、初始化、状态同步、SSR 对齐——全部严丝合缝。少一个环节，动画就会卡在“跳变”那帧上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
