# Tailwind CSS Dark Mode ## Installation ``` npm install tailwindcss-dark-mode --save-dev ``` Add the plugin to the `plugins` array in your Tailwind configuration. ```javascript plugins: [ require('tailwindcss-dark-mode')() ] ``` ## Usage Styles generated by this plugin are only used if the selector is applied to the `` 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. ### Available Variants Variants for dark mode are based on [Tailwind's own variants](https://tailwindcss.com/docs/state-variants/)... - `dark` - `dark-hover` - `dark-focus` - `dark-active` - `dark-disabled` - `dark-group-hover` - `dark-focus-within` - `dark-even` - `dark-odd` - `dark-placeholder` ... and are used in the same way. ```html

My eyes are grateful. Learn more

``` ### Enabling Variants 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. ```javascript variants: { backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'], borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'], textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'] } ``` **Please note:** This is only a simple demonstration for how dark variants are enabled and how they could be used. The variants provided by this plugin are **not** replacements for Tailwind's own variants, they are to be used _in addition_ to them. For example, anywhere you would enable `dark-hover`, you should also enable `hover`. ### Changing the Selector 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. ```javascript theme: { darkSelector: '.mode-dark' } ``` Don't forget to also change the selector in `prefers-dark.js` if you are using it. ## PurgeCSS If you are using PurgeCSS, you should either add the selector to the `whitelist` array... ```javascript whitelist: ['mode-dark'] ``` ... or add `prefers-dark.js` to the `content` array. ```javascript 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.