Tailwind CSS Dark Mode

Dark Mode has become a popular feature in modern applications and websites. It can reduce eye strain and provide a better viewing experience in low-light environments. Tailwind CSS provides first-class support, making implementing dark mode exceptionally simple.

Basic Usage

Tailwind's dark mode functionality works through a special variant dark. You can add the dark: prefix to any color-related utility class to specify that the style only takes effect in dark mode.

html

<div class="bg-white dark:bg-slate-800">
  <h2 class="text-slate-900 dark:text-white">Title</h2>
  <p class="text-slate-500 dark:text-slate-400">Content</p>
</div>

In this example:

By default (light mode), the div background is white (bg-white), and the title is dark gray (text-slate-900).
When dark mode is activated, the div background will change to dark blue-gray (dark:bg-slate-800), and the title will change to white (dark:text-white).

Enabling Dark Mode

Tailwind's dark mode is disabled by default. To enable it, you need to set the darkMode option in your tailwind.config.js file.

There are two main strategies for controlling dark mode activation:

1. Using Media Query (`media` strategy)

This is the simplest approach. Set darkMode to 'media'.

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

In this mode, Tailwind will use CSS's prefers-color-scheme media query. When the user's operating system is set to dark mode, the dark: variants will automatically take effect. You don't need to write any JavaScript code.

Pros: Simple, zero configuration, automatically responds to system settings. Cons: Cannot allow users to manually switch themes (e.g., through a button).

2. Using Class (`class` strategy)

This is a more flexible and commonly used approach. Set darkMode to 'class'.

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

In this mode, whether the dark: variants take effect depends on whether a class named dark exists on an ancestor HTML element. Typically, you would add this class to the <html> or <body> tag.

html

<!-- Dark mode off -->
<html>
<body>
  <!-- ... -->
</body>
</html>

<!-- Dark mode on -->
<html class="dark">
<body>
  <!-- ... -->
</body>
</html>

Pros: Allows users to manually control theme switching. Cons: Requires you to write some JavaScript code to toggle the dark class on the <html> tag, and usually need to save the user's preference in localStorage.

Example JavaScript for manual theme switching:

javascript

// Check if there's a theme setting in localStorage
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Toggle theme when button is clicked
function toggleTheme() {
  const isDark = document.documentElement.classList.toggle('dark');
  localStorage.theme = isDark ? 'dark' : 'light';
}

Choose which strategy depends on your project needs. If you want quick implementation and follow system settings, the media strategy is sufficient. If you want to give users the option of manual control, the class strategy is the better choice.

Tailwind CSS Dark Mode ​

Basic Usage ​

Enabling Dark Mode ​

1. Using Media Query (media strategy) ​

2. Using Class (class strategy) ​

Tailwind CSS Dark Mode

Basic Usage

Enabling Dark Mode

1. Using Media Query (`media` strategy)

2. Using Class (`class` strategy)