如何使用Tailwind CSS构建暗黑模式？-css教程-PHP中文网

必须手动给加dark类，tailwind仅通过document.documentelement是否存在dark类判断深色模式，加在或子元素无效；服务端渲染需直出对应class，客户端须用内联脚本在css解析前同步设置，避免闪白。

如何使用tailwind css构建暗黑模式？

暗黑模式开关怎么加到 HTML 根元素上？

Tailwind 的暗黑模式依赖于 dark: 变体，但它不会自动检测系统主题——你得手动告诉它当前是暗色还是亮色。最直接的方式是给元素加一个 dark class。

常见错误是只在或某个容器上加 dark，结果 dark:bg-gray-900 之类完全不生效。因为 Tailwind 默认用 class 模式（不是 media 模式），它只检查是否含 dark class。

在服务端渲染或静态页中，可直接写：或
客户端切换时，必须操作 document.documentElement.classList，不是 document.body
切换后无需重载 CSS，Tailwind 已预生成所有 dark:* 规则，只等 class 生效

怎么让暗黑模式响应系统偏好？

用 window.matchMedia 监听 (prefers-color-scheme: dark) 是最稳妥的初始化方式，但注意：它只触发一次（页面加载时），后续系统主题变更是会触发回调，但你需要主动监听。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

初始化时读取一次：const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
然后设置：document.documentElement.classList.toggle('dark', isDark)

再加监听器，避免用户中途改系统设置后 UI 不同步：

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', e => {
document.documentElement.classList.toggle('dark', e.matches);
});

不要用 localStorage 覆盖系统偏好，除非用户明确点过“切换”按钮——否则违背用户预期

用户手动切换时如何持久化？

一旦用户点了“切到暗色”，你就该记住这个选择，优先级高于系统偏好。典型做法是：

切换时写入 localStorage，key 用 color-scheme 或类似语义名
页面加载时优先读 localStorage.getItem('color-scheme')，值为 "dark" 或 "light"；没值才 fallback 到 matchMedia
注意：首次访问时若 localStorage 为空，不要默认设暗色——这会让亮色用户一进来就黑屏

同步更新 class 和 storage：

function setDarkMode(isDark) {
document.documentElement.classList.toggle('dark', isDark);
localStorage.setItem('color-scheme', isDark ? 'dark' : 'light');
}

为什么有些 dark: 样式不生效？

最常踩的坑是组件内部用了 @apply 但没处理 dark 变体，或者用了第三方组件库自带的 class（比如 bg-white）却没配 dark:bg-gray-900。

@apply 不支持直接写 @apply dark:bg-gray-800 ——必须拆成两个规则，或改用 class 属性控制
使用 dark: 时，确保对应属性本身支持暗色变体（比如 text-gray-700 有 dark:text-gray-300，但 text-red-500 没配暗色版就得自己加）
如果用了 CSS-in-JS 或 styled-components，Tailwind 的 dark: 不起作用——它只对纯 class 生效
开发时打开浏览器 DevTools，确认确实有 dark class，且目标元素的 class 列表里包含带 dark: 的完整类名（如 dark:bg-gray-900）