Core Concepts

Dark Mode

Tailwind’s dark: variant applies styles when dark mode is active, so you can support light and dark themes with the same markup.

How it works

Prefix any utility with dark: and it applies only in dark mode: dark:bg-gray-900 dark:text-white. With the recommended "class" strategy, dark mode turns on when a parent element has the class "dark".

The <body> here is given class="dark" — the card adapts

Example

<div class="dark">
  <div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100 p-6 rounded-xl border border-gray-200 dark:border-gray-700 max-w-sm">
    <h3 class="font-bold text-lg">Dark mode card</h3>
    <p class="mt-1 text-gray-600 dark:text-gray-400">Same markup, two themes.</p>
  </div>
</div>

Enabling the class strategy

tailwind.config.js

module.exports = {
  darkMode: 'class',
  // ...
}

💡

To toggle themes, add or remove the "dark" class on the <html> element with JavaScript, and remember the user’s choice in localStorage.

Dark Mode

How it works

Enabling the class strategy

Related Tailwind Topics