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!
Share this page
