响应深色模式

深色模式是很多操作系统的首要功能，设计一个深色版的网站来配合默认的设计变得越来越普遍。
为了使此操作尽可能简单，Tailwind 包含一个 dark 变体，当启用深色模式时，您可以为您的网站设置不同的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tailwind</title>
<link rel="stylesheet" href="output.css" />
</head>
<body>
<div class="bg-white dark:bg-gray-900 rounded-lg px-6 py-8 ring-1 ring-gray-900/5 shadow-xl">
    <div>
        <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
        </span>
    </div>
    <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
    <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>
</body>
</html>

现在，只要用户的操作系统开启了深色模式，dark:{class} 类将优先于无前缀的类。media 策略在底层使用 prefers-color-scheme 媒体功能，但是，如果您想支持手动切换深色模式，您也可以使用 class 策略进行更多控制。

默认情况下，当 darkMode 启用时，只会为颜色相关的类生成 dark 变体，包括文本颜色、背景颜色、边框颜色、渐变色以及占位符颜色。