如何在Tailwind CSS中优雅实现暗黑模式切换？-css教程-PHP中文网

必须显式配置 darkmode: 'class'，否则 dark: 类在编译时被彻底剔除；正确写法是 module.exports = { darkmode: 'class', content: ['./src/*/.{js,jsx,ts,tsx}'] }，且需手动为每个颜色类添加 dark: 变体并内联初始化脚本。

如何在tailwind css中优雅实现暗黑模式切换？

必须显式配置 darkMode: 'class'，否则所有 dark: 类在编译时被彻底剔除——不是 JS 没执行，是压根没生成对应 CSS 规则。

tailwind.config.js 里 darkMode 必须写对位置和值

常见错误是把 darkMode: 'class' 写进 theme.extend 或 plugins，或者写成 true、'dark'、空字符串甚至漏掉这个字段。Tailwind v3+ 不再默认启用 dark:，不写就等于关掉。

正确写法只有一种：

module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  // 其他配置
}

darkMode: 'media' → 完全响应系统偏好，document.documentElement.classList.toggle('dark') 无效
darkMode: 'class' → 是唯一支持按钮切换 + localStorage 持久化的方案
SSR 框架（如 Next.js）中若漏配，首屏 hydration 会失败，出现样式错乱

切换必须操作 `document.documentElement`，不能碰 `body`

Tailwind 只检查元素是否存在 dark 类。加在或任意 <div> 上，<code>dark:bg-gray-800 永远不会生效。

错误写法：document.body.classList.toggle('dark') —— SSR 下会触发水合 mismatch
正确写法始终是：document.documentElement.classList.toggle('dark')
切换时记得同步写入：localStorage.setItem('theme', isDark ? 'dark' : 'light')

初始化脚本必须内联在，且早于 CSS 加载

“闪白”不是 bug，是执行时机问题：浏览器先渲染无 dark 类的浅色样式，JS 后加类才触发深色，中间有可见延迟。

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

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

下载

解决方式只有一种：脚本不能挂 DOMContentLoaded 或外部文件，必须写成 IIFE 并内联在中，且包 try/catch 防 SSR 报错：

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