黑暗模式

<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>
  <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>

默认情况下，它使用prefers-color-schemeCSS 媒体功能，但您也可以通过覆盖暗色变体来构建支持手动切换暗色模式的网站。

手动切换暗模式

如果您希望深色主题由 CSS 选择器而不是媒体查询驱动prefers-color-scheme，请覆盖dark变体以使用您的自定义选择器：

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));