Tailwind CSS Dark Mode

Tailwind CSS includes a dark: variant that makes it easy to style your site differently when dark mode is enabled.

By default, Tailwind uses the prefers-color-scheme CSS media feature to detect the user's system preference. However, you can also configure Tailwind to support toggling dark mode manually using a CSS class.

Using the Dark Variant

To apply a style only when dark mode is active, prefix any utility class with dark:. For example, to set a dark background and light text:

Example

In this example, we've configured Tailwind to use the class strategy (see below), allowing us to toggle dark mode by adding or removing the .dark class from the html element.

<!doctype html>
<title>Tailwind CSS Dark Mode Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: 'class',
  }
</script>
<body class="p-8 flex items-center justify-center min-h-screen transition-colors duration-500">

<div id="container" class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl w-full max-w-md transition-colors duration-500">
    <div>
      <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
        <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
        </svg>
      </span>
    </div>
    <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight whitespace-nowrap transition-colors duration-500">Writes Upside-Down</h3>
    <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm transition-colors duration-500">
      The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
    </p>
    
    <div class="mt-6">
      <button onclick="document.documentElement.classList.toggle('dark')" class="w-full py-2 px-4 bg-slate-900 dark:bg-white text-white dark:text-slate-900 rounded font-medium transition-colors duration-500">
        Toggle Dark Mode
      </button>
    </div>
  </div>

</body>

View Output

Toggling Manually

To support manual toggling instead of relying solely on system preferences (like we did in the example above), you need to set the darkMode option to class in your tailwind.config.js file:

Now, instead of dark: utilities being applied based on media queries, they will be applied whenever the dark class is present earlier in the HTML tree (usually on the html or body tag).

Coming up, we'll explore strategies for managing duplication and reusing styles in a utility-first workflow.