dark:前缀生效需在html或body上添加dark类，否则不触发；默认不监听系统主题，需JS+媒体查询同步；class顺序决定优先级，后写的生效；自定义类名需修改tailwind.config.js的darkMode配置。
dark:前缀在class中怎么生效
它不是自动检测系统主题，而是依赖一个 dark 类是否存在于某个祖先元素上。Tailwind 默认只认 html 或 body 上的 dark 类——比如你加了 class="dark" 到 标签，所有带 dark: 前缀的 class 才会激活。
常见错误现象：页面切了深色模式，但 dark:bg-gray-800 没反应 → 八成是忘了给 加 dark 类，或者加到了组件内部 div 上（无效）。
- 必须把
dark类加在或上，否则子元素里的dark:不触发 - 如果用 JS 动态切换，直接操作
document.documentElement.classList.toggle('dark')最稳 - 不建议用
data-theme="dark"这类自定义属性——Tailwind 默认不监听它，除非你改配置
如何让dark模式跟随系统设置自动开启
Tailwind 本身不监听 prefers-color-scheme，得靠 CSS 媒体查询 + JS 补一手。核心思路是：用媒体查询判断系统偏好，再把结果同步到 上。
典型场景：用户没手动点开关，但系统设了深色模式，网页应该默认走深色。
立即学习“前端免费学习笔记（深入）”；
- 初始化时读
window.matchMedia('(prefers-color-scheme: dark)').matches，然后设document.documentElement.classList.add('dark') - 监听变化：
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，动态增删dark类 - 注意 SSR 场景（如 Next.js）：服务端渲染时没有
window，JS 初始化逻辑要包在useEffect或if (typeof window !== 'undefined')里
dark:和class优先级冲突怎么办
dark:bg-blue-900 和 bg-white 同时写在一个元素上，深色模式下谁赢？答案是：写在后面的 class 优先级更高 —— Tailwind 的 dark 变体本质就是生成带 .dark .your-class 的 CSS 规则，它不改变单个 class 的权重，只靠 CSS 层叠顺序决定。
容易踩的坑：以为 dark: 是“覆盖”，结果发现深色下还是浅色背景。
- 检查 class 顺序：
bg-white dark:bg-gray-900✅；dark:bg-gray-900 bg-white❌（后者永远生效） - 避免混用 utility class 和自定义 CSS：比如你写了
.card { background: white; }，又加dark:bg-gray-900，CSS 优先级可能被你的.card覆盖 - 调试技巧：打开 DevTools，看对应元素的 computed styles 里，background 是从哪条规则来的
自定义dark类名或支持data-theme
默认只响应 dark 类，但项目可能已有 data-theme="dark" 或想用 theme-dark 这种命名。这时得改 Tailwind 配置，不然 dark: 前缀压根不工作。
关键点：不是改 HTML，是改 tailwind.config.js 里的 darkMode 选项。
- 用属性模式：
darkMode: ['selector', '[data-theme="dark"]']，然后在上生效 - 用 class 模式但换名：
darkMode: ['class', 'theme-dark']，之后就得用class="theme-dark"替代class="dark" - 改完必须重启 dev server，否则新配置不加载
复杂点在于：一旦改了 darkMode，所有环境（开发、构建、CI）都要保持一致；很多人本地跑得通，部署后失效，就是因为 build 机器没重启或缓存了旧配置。
