Tailwind - 黑夜模式prefers-color-scheme 是一个媒体查询条件，用于在操作系统级别判断用户是

prefers-color-scheme 是一个媒体查询条件，用于在操作系统级别判断用户是偏好浅色主题还是偏好深色主题

Tailwind包括一个dark功能类前缀，以表示对应样式仅在黑夜模式下生效

<div class="bg-white dark:bg-slate-800"> ... </div>

默认情况下，Tailwind会使用prefers-color-scheme 这个媒体查询条件来判断用户偏好

如果需要实现手动切换，需要使用类模式，而不是媒体查询模式

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

<html class="dark">
<body>
  <!-- 
		只有当前元素的父元素存在dark这个css类的时候
		其子元素和当前元素的dark功能类前缀才会有效果
    
		一般情况下，是给整个页面一起添加黑夜模式
		也就是在html上添加dark类
	-->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

// 手动判断是否需要添加dark类
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

自定义类名

module.exports = {
  // 此时当页面上存在.my-dark-mode的时候才会开启黑夜模式，而不是.dark
  darkMode: ['class', 'my-dark-mode'],
  // ...
}