Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark).
npm install tailwindcss-prefers-dark-mode --save-dev
Add the plugin to the plugins array in your tailwind.config.js file.
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-prefers-dark-mode')()
]
};darkdark:hoverdark:focusdark:activedark:group-hoverdark:focus-within
<div class="bg-gray-100 dark:bg-gray-800 border-t-4 border-green-500">
<nav class="flex flex-wrap justify-end items-center p-4">
<a class="text-gray-700 hover:bg-gray-300 dark:hover:bg-transparent dark:focus:text-green-500" href="#">Text</a>
</nav>
</div>Dark variants must be enabled on each utility in your tailwind.config.js file.
variants: {
backgroundColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
borderColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
textColor: [
"responsive",
"hover",
"focus",
"group-hover",
"dark",
"dark:hover",
"dark:focus",
"dark:group-hover",
"focus-within",
"dark:focus-within"
],
borderStyle: ["responsive", "dark"]
}You can check the full list of default variants in Tailwind default config file.