如何在Tailwind CSS中正确配置深色模式切换策略？-css教程-PHP中文网

darkMode 必须显式配置在 tailwind.config.js 顶层，值为 'class' 或 'media'；class 模式下需操作 document.documentElement 并内联初始化脚本防闪白；所有适配样式须手动加 dark: 前缀。

如何在tailwind css中正确配置深色模式切换策略？

darkMode 必须显式写在 tailwind.config.js 顶层

不写 darkMode 字段，或写错位置、值，dark: 类就根本不会出现在最终 CSS 里——不是失效，是编译时被彻底丢弃。常见错误包括：darkMode: true、darkMode: 'dark'、把配置塞进 theme.extend 或 plugins 里。正确写法只有一处：

darkMode: 'class' 或 darkMode: 'media'，且必须放在 module.exports 的顶层对象中。

class 策略下必须操作 document.documentElement

Tailwind 只检查元素是否含 dark 类。给加类完全无效，尤其在 Next.js/Nuxt 等 SSR 框架中会引发 hydration mismatch 和首屏闪白。

切换逻辑必须用：

document.documentElement.classList.toggle('dark')
初始化脚本要内联在中，不能依赖 DOMContentLoaded 或外部 JS 文件
服务端渲染环境（如 SSR）下 window 不存在，必须包 try/catch

防“闪白”靠的是执行时机，不是 CSS 写法

浏览器先解析 HTML/CSS，再执行 JS。如果 JS 在底部或事件监听里才加 dark 类，用户必然看到一帧浅色 → 瞬间变暗的闪烁。

最小可行初始化脚本（直接贴进）：

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

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

下载

(() => {
  try {
    const stored = localStorage.getItem('theme')
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    const shouldDark = stored === 'dark' || (stored !== 'light' && prefersDark)
    document.documentElement.classList.toggle('dark', shouldDark)
  } catch {}
})()

这段代码必须早于任何 CSS 加载，且不能抽离为外部文件。