深色模式

使用方式类似于断点，不同的是，要把:左边固定为dark，:右边同样写下你想要覆盖成的深色样式。

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-500 dark:text-gray-400">123</p>
</div>

默认跟随系统切换深色模式。但你也可以通过一点 JavaScript 来构建支持手动切换深色模式的网站。

正在入门的读者请先跳过本页剩余部分，以免影响最快路径学习。

手动切换深色模式

阅读这一段前，需要你先去了解一下 样式生效的条件。

默认的 dark variant 使用 prefers-color-scheme CSS 媒体特性，要支持手动切换模式需要覆盖 tailwind 默认的判断逻辑，也就是要用咱们自己的代码来接管切换模式的功能。