Tailwind CSS 深色模式
深色模式
使用 Tailwind CSS 在深色模式下为您的网站设置样式。
现在深色模式是很多操作系统的首要功能，设计一个深色版的网站来配合默认的设计变得越来越普遍。
为了使此操作尽可能简单，Tailwind 包含一个 dark 变体，当启用深色模式时，您可以为您的网站设置不同的样式：
<div class="bg-white dark:bg-gray-800">
<h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
<p class="text-gray-600 dark:text-gray-300">
Lorem ipsum...
</p>
</div>请务必注意，出于文件大小的考虑，默认情况下，Tailwind 未开启深色模式变体。
要启用深色模式，请在 tailwind.config.js 文件中把 darkMode 选项设置为 media：
// tailwind.config.js
module.exports = {
darkMode: 'media',
// ...
}现在，只要用户的操作系统开启了深色模式，dark:{class} 类将优先于无前缀的类。media 策略在底层使用 prefers-color-scheme 媒体功能，但是，如果您想支持手动切换深色模式，您也可以 使用 ‘class’ 策略 进行更多控制。
默认情况下，当 darkMode 启用时，只会为颜色相关的类生成 dark 变体，包括文本颜色、背景颜色、边框颜色、渐变色以及占位符颜色。
与其它变体结合使用
dark 变体可以与响应式变体和状态变体结合使用：
<button class="lg:dark:hover:bg-white ...">
<!-- ... -->
</button>为了使其正常工作，您必须把响应式变体要在最前面，然后是 dark 变体，最后是状态变体。
为其它功能类启用深色模式
要为其他实用程序启用 dark 变体，请将 dark 变体添加到您想要启用它的任何实用程序的变体列表中：
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
textOpacity: ['dark']
}
}
}默认情况下，dark 变体只对 backgroundColor、borderColor、gradientColorStops、placeholderColor 和 textColor 启用。
手动切换深色模式
如果要支持手动切换深色模式而不是依赖于操作系统首选项，请使用 class 策略代替 media 策略：
// tailwind.config.js
module.exports = {
darkMode: 'class',
// ...
}现在，dark:{class} 类将不再根据 prefers-color-scheme 起作用，而是当在 HTML 树中出现 dark 类时起作用。
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>如何将 dark 类添加到 html 元素中取决于您，但是一种常见的方式是使用 JS 从某个地方（如 localStorage）读取首选项并相应的更新 DOM。
这是一个简单的示例，说明如何支持浅色模式、深色模式，以及如何遵守操作系统的首选项。
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
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')
}
// 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 策略时，dark 模式实用程序的特异性将高于常规实用程序，因为选择器包含一个额外的类。这意味着在某些情况下，某些实用程序组合的行为在 class 模式下可能与在 media 模式下略有不同。
例如，考虑这个 HTML：
<div class="text-black text-opacity-50 dark:text-white">
<!-- ... -->
</div>使用媒体策略时，dark:text-white 与 text-black 和 text-opacity-50 具有相同的特异性。因为 text-opacity-50 在生成的 CSS 中比 dark:text-white 定义得晚，所以白色文本将具有 50% 的不透明度。
当使用 class 策略时，dark:text-white 具有更高的特异性，因此即使它被定义得更早，它实际上也会覆盖 text-opacity-50 并将不透明度重置回 1。所以当使用 class 策略时，你'需要在 dark 模式下重新指定不透明度：
<div class="text-black text-opacity-50 dark:text-white dark:text-opacity-50">
<!-- ... -->
</div>