Adding dark mode to Tailwind CSS

Tailwind CSS is a great new utility-first framework that is quickly growing in popularity. I’ve become a huge fan of it since I can focus on writing CSS without switching contexts or worrying about naming classes. It comes with a ton of functionality out-of-the-box including responsive support via modifiers like md and lg. As dark- and light-modes are becoming more popular, there’s a push for supporting both on your site. This is easy to accomplish with the prefers-color-scheme: dark media query. This is very easy to add to Tailwind CSS and be able to utilize like their other responsive modifiers. Here’s how:

Open up your tailwind.config.js . If you don’t have a config file yet, you can create one following Tailwind CSS’s configuration guide.

We don’t want to lose the predefined media queries, so let’s extend a screens property to add our dark mode media query:

module.exports = {
  theme: {
    extend: {
      screens: {
        dark: {
          raw: '(prefers-color-scheme: dark)',
        },
        // => @media (prefers-color-scheme: dark) { ... }
      },
    },
  },
};

Then you can add dark: prefix to any of your rules that support the responsive variant and those rules will take effect when dark mode is enabled!

<div class=“text-gray-900 dark:text-gray-100”>
  <!-- ... -->
</div>

Now get out there and support dark mode!