Dark Mode in Tailwind

Tailwind supports styling for browsers using Dark Mode. This is done by simply prepending dark: to your tailwind classes.

<div class="dark:bg-slate-700 dark:text-white">
  Sample text
</div>

By default this uses the prefers-color-scheme, which is determined by the browser.

To read more about this, or other ways to use dark mode with Tailwind, you can check out the official tailwind documentation for yourself.

Tweet