Posts Learn Snippets Categories Tags About
/

How to Enable Dark Mode Variants in TailwindCSS

Get the best of TailwindCSS and enable the dark mode variants to create UI that's more accessible for everyone

Created on Jul 04, 2021

8 views

By default, the dark mode variants are not enabled by TailwindCSS. To enable it, you will have to set the "darkMode" settings in the "tailwind.config.js" file.
// tailwind.config.js

module.exports = {
  darkMode: "media", // or "class"
  // ...
}

TailwindCSS Dark Mode Type
There are 2 types of dark mode in TailwindCSS and they are the "media" and "class" types.
  • media - automatically apply dark or light mode depending on user operating system color preference
  • class - manual toggle by the user (more control)

Once enabled now you can write the dark variant classes like below.
dark:bg-gray-600
dark:text-gray-200
dark:border-green-400

Created by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.