dark变体在class中不生效是因为Tailwind只检测HTML根元素是否含有dark类，而非自动响应系统偏好；需手动添加dark类并监听prefers-color-scheme变化来动态切换。
dark变体在class中不生效？检查根元素是否标记了dark类
Tailwind的dark:变体不是靠系统偏好自动触发的，它只认你写在HTML里的dark类。如果你写了dark:bg-gray-800但背景没变，八成是<html>或<body>上缺了dark这个class。
常见错误现象：prefers-color-scheme: dark已启用，但页面仍是亮色；控制台没报错，样式表里也生成了暗色规则——只是没匹配上。
- 必须手动给根元素加
dark类，比如<html class="dark">（开发时可先硬编码测试） - 生产环境建议用JS检测并切换：
document.documentElement.classList.toggle('dark', window.matchMedia('(prefers-color-scheme: dark)').matches) - 别在组件内部用
dark:去“期望父级自动传递主题”，它不继承，只看最近的、带dark类的祖先（通常是html）
想响应系统主题变化？得监听matchMedia，不能只靠初始化
用户切到深色模式后页面没更新，是因为Tailwind生成的CSS是静态的，不会自己重读系统偏好。你得主动监听变化并更新DOM类。
使用场景：用户在设置里开关深色模式，或macOS/iOS系统级切换。
立即学习“前端免费学习笔记（深入）”；
- 用
window.matchMedia('(prefers-color-scheme: dark)')获取初始状态 - 调用
addEventListener('change', ...)捕获后续变化 - 只改
document.documentElement.classList，别动body或其他容器——否则dark:可能找不到作用域 - 注意Safari 14+才支持
addEventListener在matchMedia对象上，旧版需轮询（极少需要）
dark:和class="dark"冲突？优先级和覆盖逻辑要理清
当你同时用了dark:bg-gray-900和class="dark bg-white"，结果不是叠加，而是CSS特异性竞争。Tailwind生成的.dark .dark\:bg-gray-900比.bg-white优先级高，但如果你写成class="dark:bg-gray-900 bg-white"，那bg-white会赢——因为它是普通class，无条件应用。
参数差异：带dark:前缀的工具类，编译后变成.dark .dark\:xxx；不带前缀的，就是.xxx。
- 避免混用
dark:bg-和bg-在同一元素——容易互相覆盖，行为难预测 - 想让暗色下完全接管，就全用
dark:变体，亮色用默认class，比如bg-white dark:bg-gray-900 - 如果用了
!important（不推荐），它会破坏dark:的条件性，导致暗色模式失效
自定义暗色值时，为什么tailwind.config.js里配了darkMode: 'class'还是没用？
配置项darkMode: 'class'只是告诉Tailwind“用class方式触发暗色”，不是开启开关。它不自动加dark类，也不监听系统。很多人卡在这步，以为配完就万事大吉。
性能影响：设为'media'会直接用@media (prefers-color-scheme: dark)包裹所有暗色规则，体积略小，但无法手动强制切主题；'class'更灵活，但要你多写几行JS。
-
darkMode: 'class'是必要配置，但不是充分条件 - 必须配合HTML中存在
dark类，且该类在<html>或<body>上 - 别把
darkMode设成'media'还指望JS切主题——它压根不看class - 升级到v3.3+后，
darkMode: 'class'默认只查<html>，不再降级找<body>，这点容易被忽略
darkMode: 'class'配置完就能自动工作。 
