深色模式
使用变体为站点编写深色模式样式。
概述
如今深色模式已成为许多操作系统的一等公民功能，为网站设计与默认样式配套的深色版本也越来越常见。
为了尽量简化这件事，Tailwind 提供了 dark 变体，让你可以在启用深色模式时使用不同的样式：
Light mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
Dark mode
Writes upside-down
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
<!-- [!code word:dark\:bg-gray-800] -->
<!-- prettier-ignore -->
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
<div>
<span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
<svg class="h-6 w-6 stroke-white" ...>
<!-- ... -->
</svg>
</span>
</div>
<!-- prettier-ignore -->
<!-- [!code word:dark\:text-white] -->
<h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Writes upside-down</h3>
<!-- prettier-ignore -->
<!-- [!code word:dark\:text-gray-400] -->
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm ">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
</p>
</div>默认情况下，它使用 prefers-color-scheme 这一 CSS 媒体特性；你也可以通过覆盖 dark 变体，构建支持手动切换深色模式 的站点。
手动切换深色模式
如果你希望深色主题由 CSS 选择器驱动，而不是 prefers-color-scheme 媒体查询，请覆盖 dark 变体以使用自定义选择器：
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));这样一来，dark:* utility 不再基于 prefers-color-scheme 生效，而是在 HTML 树中更靠前的位置存在 dark class 时生效：
<!-- [!code word:dark\:bg-black] -->
<!-- [!code word:dark] -->
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>如何把 dark class 加到 html 元素上由你决定；常见做法是用一小段 JavaScript 更新 class 属性，并把偏好同步到 localStorage 之类的地方。
使用 data 属性
如果想用 data 属性而不是 class 来启用深色模式，只需用属性选择器覆盖 dark 变体：
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));现在，只要祖先节点上的 data-theme 属性被设为 dark，深色模式 utility 就会生效：
<!-- [!code word:dark\:bg-black] -->
<!-- [!code word:data-theme="dark"] -->
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>同时支持系统主题
若要构建支持浅色、深色以及跟随系统主题的三向切换，请使用自定义深色模式选择器，并用 window.matchMedia() API 检测系统主题，在需要时更新 html 元素。
下面是一个简单示例，展示如何同时支持浅色模式、深色模式，以及遵循操作系统偏好：
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
document.documentElement.classList.toggle(
"dark",
localStorage.theme === "dark" ||
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),
);
// Whenever the user explicitly chooses light mode
localStorage.theme = "light";
// Whenever the user explicitly chooses dark mode
localStorage.theme = "dark";
// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem("theme");同样，你可以用自己喜欢的方式管理这件事，甚至把偏好存在服务端数据库里并在服务端渲染 class——完全由你决定。