Dark mode

Add the dark: prefix to any class to apply it only in dark mode. By default it follows the user's system setting.

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-white">
  <h1 class="text-2xl font-bold">Hello</h1>
  <p class="text-slate-600 dark:text-slate-300">Works in light and dark.</p>
</div>

/* Toggle manually with a .dark class instead (Tailwind v4) */
@custom-variant dark (&:where(.dark, .dark *));

// JS toggle
document.documentElement.classList.toggle("dark")