Posts Learn Components Snippets Categories Tags Tools 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

96 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

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)