Dark Mode in Tailwind CSS

Tailwind provides first-class support to build and toggle dark mode UIs. This document will show you how to implement, maintain, and customize a Tailwind-based dark mode experience for both developers and end users.

1. Dark Mode Activation

To activate dark mode globally, apply the following `dark` class to your HTML element.

<html class="dark">

You can also implement dark using a theme switcher or leverage prefers-color-scheme to toggle based on user settings.

2. Dark Mode Colors

Tailwind uses utility inversion to create a clean dark mode version of your interface. This means that your default (light mode) will remain untouched and inverted in dark mode automatically.

text-gray-900 => text-white
bg-white => bg-gray-900
text-white => text-black (reverse logic)

You can customize these default behaviors by extending the colors section in tailwind.config.js.

3. Configuration

Dark theme config

Enable dark mode in Tailwind by setting darkMode in your configuration file

module.exports = {
  darkMode: 'class' // or 'media'
}

Choose between class for manual control using a class in HTML, or media for automatic detection of OS setting.

Customizing dark colors

You can manually control the dark mode colors instead of the standard inversion by defining your own variants.