Enabling and Using the dark: Variant

Tailwind makes dark mode styling straightforward with the dark: variant prefix. Any utility class can be prefixed with dark: to apply only when dark mode is active. By default, Tailwind uses the media strategy, which detects the user's OS-level dark mode preference via the prefers-color-scheme media query. An alternative class strategy lets you toggle dark mode programmatically by adding or removing the dark class on the html element. To switch to the class strategy, set darkMode: "class" in tailwind.config.js. This approach gives you full control over dark mode — a common pattern is to save the user's preference in localStorage and apply the dark class on page load before the first paint to avoid flash of wrong theme. JavaScript toggles the dark class, and Tailwind applies all the dark: variants instantly. Building a comprehensive dark mode requires thinking in pairs: every color utility used in light mode should have a dark: counterpart. Common patterns are bg-white dark:bg-gray-900 for page backgrounds, text-gray-900 dark:text-gray-100 for body text, border-gray-200 dark:border-gray-700 for dividers, and bg-gray-100 dark:bg-gray-800 for card surfaces. The prose-invert modifier on the typography plugin handles dark mode for rich text content in one class.

Example

// tailwind.config.js — enable class-based dark mode
module.exports = {
  darkMode: 'class', // toggle by adding 'dark' class to <html>
  content: ['./src/**/*.{html,js,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

<!-- Dark mode toggle button (vanilla JS) -->
<button id="theme-toggle" class="p-2 rounded-full bg-gray-100 dark:bg-gray-800">
  <span class="dark:hidden">🌙</span>
  <span class="hidden dark:inline">☀️</span>
</button>

<script>
  const btn = document.getElementById('theme-toggle');
  // Apply saved preference before paint
  if (localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  }
  btn.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
    localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  });
</script>

<!-- Full page with dark mode pairs -->
<body class="bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100 transition-colors">
  <header class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
    <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
      <span class="font-bold text-blue-600 dark:text-blue-400">Brand</span>
    </div>
  </header>

  <main class="max-w-3xl mx-auto px-4 py-12">
    <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-6 shadow">
      <h1 class="text-2xl font-bold mb-3">Dark mode card</h1>
      <p class="text-gray-600 dark:text-gray-400">
        Body text that adapts to the current color scheme automatically.
      </p>
    </div>
  </main>
</body>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned