Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

tailwindcss-dark-mode

1.1.7 • Public • Published

Tailwind CSS Dark Mode

Installation

npm install tailwindcss-dark-mode --save-dev

Add the plugin to the plugins array in your Tailwind configuration.

plugins: [
  require('tailwindcss-dark-mode')()
]

Usage

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.

Available Variants

Variants for dark mode are based on Tailwind's own 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.

<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>

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.

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.

  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...

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.

Install

npm i tailwindcss-dark-mode

DownloadsWeekly Downloads

3,025

Version

1.1.7

License

MIT

Unpacked Size

8.69 kB

Total Files

7

Last publish

Collaborators

  • avatar