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',

}

<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>

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',

}

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

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

  </p>
</div>