Chromium系浏览器中prefers-color-scheme不生效问题咨询

首先，最可能的原因是 Tailwind 的基础样式或 body 元素的背景覆盖了 html 的背景。默认情况下，Tailwind 的 base 层会给 body 设置背景色（比如浅色模式下的白色），而 body 元素会占满视口，导致你设置的 html 背景色被遮挡——比如系统处于深色模式时，html 显示红色，但切换到浅色模式后，body 的白色盖住了 html 的蓝色，看起来始终是红色。

解决方法：

• 把背景色设置到 body 元素上，而非 html：

  @media (prefers-color-scheme: dark) {
    body {
      background-color: red;
    }
  }
  
  @media (prefers-color-scheme: light) {
    body {
      background-color: blue;
    }
  }
  

• 或者，将 body 的背景设为透明，让 html 的背景显示出来：

  body {
    background-color: transparent;
  }
  

其次，检查 Tailwind 的配置是否干扰了系统主题检测。如果你的 tailwind.config.js 中设置了 darkMode: 'class'，虽然这不会直接影响原生媒体查询，但 Tailwind 可能会给页面元素添加强制背景样式，导致你的自定义设置失效。可以暂时注释该配置项测试。

另外，确认 CSS 文件是否被正确编译。如果你使用 Tailwind CLI 或构建工具（如 Vite、Webpack），需重新运行构建命令，确保 @tailwind 指令被正确处理，同时媒体查询代码未被工具意外修改或忽略。

最后，清除浏览器缓存（快捷键 Ctrl+Shift+R 或 Cmd+Shift+R），旧缓存可能导致新样式无法生效。

内容的提问来源于stack exchange，提问作者Rasik