DEV Community

loading...
Cover image for Dark mode in your app using tailwind CSS

Dark mode in your app using tailwind CSS

Aastha Pandey
I write only on those topics, wherein I myself was stuck at some point in time.
・1 min read

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)