Dark Mode

dark: compiles to @media (prefers-color-scheme: dark) by default, so the page follows the operating system (Dark Mode): write the light design with plain utilities and put dark: overrides beside them. For a user toggle, redefine the variant with @custom-variant to match a class or [data-theme=dark] on an ancestor:

Class-based dark mode: one card, two themesHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @custom-variant dark (&:where(.dark, .dark *));
</style>
<div class="grid grid-cols-2 gap-4 bg-slate-100 p-4">
  <div id="card" class="rounded-xl bg-white p-5 shadow-xl ring ring-slate-900/5 dark:bg-slate-800">
    <h3 class="font-semibold text-slate-900 dark:text-white">Writes upside-down</h3>
    <p class="text-sm text-slate-500 dark:text-slate-400">The pen works in any orientation.</p>
  </div>
  <div id="night" class="dark scheme-dark rounded-xl bg-slate-950 p-3"></div>
</div>
<script>night.append(card.cloneNode(true));</script>

Browser output of 14

:where() adds no specificity, so dark: classes win through source order like any variant. Set the class in a tiny inline <head> script (read localStorage, else fall back to matchMedia("(prefers-color-scheme: dark)")) or each load flashes light first; the toggle from Colors and Dark Mode works unchanged.

MENU