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
