必须手动给加dark类，否则dark:样式不生效；tailwind仅通过document.documentelement上是否存在dark类判断深色模式，且需在css解析前同步设置以避免闪白和跨标签页不同步。
必须手动给 加 dark 类，否则 dark: 样式完全不生效——Tailwind 不会自动检测系统偏好或注入类名。
为什么 dark: 前缀没反应？
常见现象是写了 dark:bg-gray-900，但背景始终是浅色。根本原因不是 CSS 写错，而是 Tailwind 没收到“当前处于深色模式”的信号。它只认一个条件：HTML 根元素（document.documentElement）上是否存在 dark 类。加在 或任意子元素上都无效。
-
darkMode: 'class'配置后，Tailwind 编译出的 CSS 规则形如.dark .bg-gray-900 { background-color: #1f2937; }，依赖父级.dark - 即使系统设为深色、
prefers-color-scheme: dark匹配成功，dark:也不会触发——media模式才管这个 - 直接在 HTML 模板里硬写
是验证配置是否走通的最小步骤
怎么在 HTML 中正确添加 dark 类？
不能靠 JS 异步加载后再加，否则首屏必闪白。必须让类名在 CSS 解析前就存在。
- 服务端渲染（如 Next.js、Nuxt）：在模板或 SSR 入口中根据用户偏好/存储值，直接输出
或 - 纯静态页面：用内联
<script></script>放在最顶部，同步读取localStorage.getItem('theme')并立即操作document.documentElement.classList - 绝对不要写
document.body.classList.toggle('dark')——Tailwind 默认不查，SSR 场景下还会导致水合失败
如何避免“闪白”和跨标签页不同步？
用户点击切换按钮后，页面变暗，但刷新又回浅色；或者在一个标签页切了深色，另一个标签页还是浅色——这两个问题都源于状态没同步到位。
- 切换时必须同步三处：
document.documentElement.classList、localStorage.setItem('theme', 'dark')、sessionStorage（可选，用于快速响应） - 监听
storage事件：当其他标签页修改了localStorage，当前页要立刻响应，执行document.documentElement.classList.toggle('dark', isDark) - 初始化脚本里别漏 fallback：如果
localStorage为空，应读window.matchMedia('(prefers-color-scheme: dark)').matches，而不是默认浅色
调试时最该看 DevTools 的哪块？
别只盯着元素面板里的 class 列表，重点看 Computed 标签页里的实际生效样式来源。
- 如果
background-color显示的是bg-white对应的规则，说明.dark .bg-gray-900这条 CSS 根本没匹配上——大概率是没dark类 - 检查 CSS 规则是否被生成：搜索
.dark .bg-gray-900，找不到说明tailwind.config.js没配darkMode: 'class'，或配错了值 -
dark:和普通 class 的顺序影响最终效果：bg-white dark:bg-gray-900✅，dark:bg-gray-900 bg-white❌（后者永远覆盖前者）
真正麻烦的不是写 dark:，而是让那个 dark 类稳稳地、早早地、一致地落在 上——所有后续逻辑都卡在这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
