yarn add tailwindcss-dark-mode --dev
Add the plugin to the plugins array in your Tailwind configuration.
plugins: [
require('tailwindcss-dark-mode')()
]Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
Variants for dark mode are based on Tailwind's own variants...
darkdark-hoverdark-focusdark-activedark-group-hoverdark-focus-withindark-odd
... and are used in the same way.
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a ... class="text-blue-300 hover:text-blue-400 dark:text-blue-700 dark-hover:text-blue-600">
Learn more
</a>
</p>
</div>As with existing variants such as hover and focus, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-odd'],
borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active']
}By default, .mode-dark is used as the selector for dark mode. You can change this by adding the darkSelector key to the theme section in your Tailwind configuration.
theme: {
darkSelector: '.mode-dark'
}Don't forget to also change the selector in prefers-dark.js if you are using it.
If you are using PurgeCSS, you should either add the selector to the whitelist array...
whitelist: ['mode-dark']... or add prefers-dark.js to the content array.
content: [
'**/*.js',
'./node_modules/tailwindcss-dark-mode/prefers-dark.js',
'./or/your/own/prefers-dark.js'
]Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the selector is only applied when the page is loaded.