Dark Mode in Tailwind CSS

From the Tailwind CSS cheat sheet · Dark Mode · verified Jul 2026

Dark Mode

Apply different styles in dark mode using the dark: variant.

html

<!-- Follows system preference by default -->
<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">Title</h1>
  <p class="text-gray-600 dark:text-gray-300">Text</p>
</div>

💡 Dark mode follows the OS preference by default - no config needed

⚡ Prefix any utility with dark: to apply it only in dark mode

📌 For manual toggle, override the dark variant with @custom-variant dark (&:where(.dark, .dark *)); then toggle a .dark class on <html>

🟢 Common pattern: pair light/dark values on the same element (bg-white dark:bg-gray-900)

dark-modethemevariant

Back to the full Tailwind CSS cheat sheet