Arms crossed picture of James Auble
tailwind logo with dark mode title

Tailwind Dark Mode in 60 Seconds

PublishedJun 27th, 2022

I just spent about 15 minutes looking for how dark mode works in Tailwind and sifted through lengthy articles to find essentially what could be explained in about 15 seconds. So I bring you the steps you're looking for if you're like me:

Steps

1. Install Tailwind.

2. In tailwind.config.js set darkMode to class.

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

3. Add a class dark to the <html> tag for testing.

<html lang="en" class="dark"></html>

4. Add dark: as a state modifier with different styles for when you're in dark mode:

<div class="text-gray-900 dark:text-primary">Some Text</div>

5. Reload the page. Default state should be dark mode. Remove the dark class from the <html> element and you should see the default theme styles.

I won't waste anymore characters here.

Code on web assassins!

Need a web developer?

Contact Me
Back to Blog
Scrolldown Icon