Posts Learn Components new Snippets new Categories Tags About Device Beast sponsor

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


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.

Snippets by

PostSrc poster


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.


PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Other Code Snippets