DEV Community

Cover image for Dark mode in your app using tailwind CSS
Aastha Pandey
Aastha Pandey

Posted on

Dark mode in your app using tailwind CSS

I wanted a dark mode feature in my web application and instead of writing it from scratch I just used Tailwind CSS dark mode, was pretty easy to use, all you need to do is enclose the entire app inside a div having class name dark and also in tailwind.config.js file, you have to enable dark mode variant.
This class darkMode is quite useful when one wants to manually toggle the theme from dark to light and vice versa.

// tailwind.config.js
module.exports = {
  darkMode: 'class',

}
Enter fullscreen mode Exit fullscreen mode
<div className = 'dark'>
<div class="bg-white dark:bg-gray-800">

  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>
<div>
Enter fullscreen mode Exit fullscreen mode

or

If one is using media instead of class in darkMode variant, no need to enclose the entire app inside a div having class name dark.

// tailwind.config.js
module.exports = {
  darkMode: 'media',

}
Enter fullscreen mode Exit fullscreen mode

<div class="bg-white dark:bg-gray-800">

  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>

Enter fullscreen mode Exit fullscreen mode

Discussion (0)