Dark Mode

Tailwind · Reference cheat sheet

📋 Overview

Dark mode uses the dark: variant. Strategy is either media-based (prefers-color-scheme) or class-based (class="dark" on a root element).

Class strategy config (v3):

export default {
  darkMode: "class",
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
};

Markup:

<html class="dark">
  <body class="bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-50">
    ...
  </body>
</html>

Toggle sketch:

document.documentElement.classList.toggle("dark");

Forgetting to set darkMode: 'class' while toggling a class does nothing.
Flash of wrong theme on first paint — set class early (inline script) before CSS paints.
Not all colors need inversion; keep brand accents consistent.