Tailwind CSS明暗模式原理咨询：dark:前缀的作用是什么？

一、dark: 前缀的核心作用 #

dark: 是Tailwind提供的深色模式变体，本质是给基础样式类加上「仅在深色模式生效」的条件限制。带这个前缀的类，只会在页面处于深色模式状态时触发对应的样式，浅色模式下完全不生效——这就是你看到bg-white（浅色生效）和dark:bg-slate-800（深色生效）切换的原因。

二、具体实现逻辑 #

Tailwind默认提供两种深色模式的检测方式，对应dark:前缀的两种生效逻辑：

1. 默认：基于系统偏好的媒体查询模式

默认情况下，Tailwind会根据用户的系统显示偏好（比如手机/电脑设置里的深色模式开关）来触发深色样式。它会把dark:前缀的类编译成带有prefers-color-scheme: dark媒体查询的CSS规则。

比如你示例里的dark:bg-slate-800，编译后的CSS是这样的：

@media (prefers-color-scheme: dark) {
  .dark\:bg-slate-800 {
    background-color: rgb(30 41 59);
  }
}

而bg-white是无媒体查询的基础类：

.bg-white {
  background-color: rgb(255 255 255);
}

当系统处于浅色模式时，媒体查询不生效，bg-white的样式会被应用；当系统切换到深色模式，媒体查询触发，dark:bg-slate-800的样式会覆盖（或者补充）基础样式。

2. 手动控制：基于类名的切换模式

如果需要给用户提供手动切换深色/浅色模式的按钮（脱离系统偏好），可以把Tailwind的深色模式改成class模式。

首先在tailwind.config.js里修改配置：

module.exports = {
  darkMode: 'class',
  // 其他配置项...
}

此时dark:前缀的类会被编译成「依赖根元素dark类」的CSS规则：

.dark .dark\:bg-slate-800 {
  background-color: rgb(30 41 59);
}

只要你在HTML的根元素（比如<html>或<body>）上添加dark类，页面就会触发所有带dark:前缀的样式；移除dark类就回到浅色模式。

三、对你示例代码的实际作用 #

你示例里的div元素，在浅色模式下会应用bg-white的白色背景；当系统切换到深色模式（或根元素添加dark类）时，dark:bg-slate-800会生效，把背景改成深灰蓝色。其他文本类的dark:text-white、dark:text-slate-400也是同样的逻辑——只在深色模式下替换文本颜色。

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