DocsCustomizationsDark Mode

Dark Mode

Tailwind CSS v4 includes a built-in dark variant that makes styling for dark mode effortless. By default, it detects the user’s system preference, but you can also toggle it manually using a class.

Basic Usage

To style an element for dark mode, add the dark: prefix to any utility class:

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  <!-- Content -->
</div>

Manually Toggling Dark Mode

If you want to support manual toggling (e.g., a switch in your navbar), Tailwind v4 makes this simple with the “CSS-first” configuration. You can define a custom variant that looks for a specific class (usually .dark) on a parent element.

Add this to your CSS:

@custom-variant dark (&:where(.dark, .dark *));

Now, whenever the .dark class is present on the <html> or <body> tag, the dark: modifiers will activate.

Using next-themes

For Next.js projects like TailAdmin, we recommend using next-themes to manage the class toggling state. It handles system preferences, persistence, and hydration mismatch avoidance automatically.

The ThemeToggler component in this project uses next-themes to toggle the dark class:

import { useTheme } from "next-themes";
 
const ThemeToggler = () => {
  const { theme, setTheme } = useTheme();
 
  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme
    </button>
  );
};

For more details on dark mode configuration in Tailwind CSS v4, visit the official Dark Mode documentation.

ScreenColor