Skip to content
🌚 A Tailwind CSS plugin that adds variants for dark mode
Branch: master
Clone or download
ChanceArthur Add new variants (#1)
The following variants are now available:
- dark-hover
- dark-focus
- dark-active
- dark-group-hover
- dark-focus-within
Latest commit 2badeaa May 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc.json
.gitattributes Initial commit Apr 24, 2019
.gitignore Initial commit Apr 24, 2019
LICENSE Initial commit Apr 24, 2019
README.md Add new variants (#1) May 2, 2019
dark-mode.js Initial commit Apr 24, 2019
index.js Add new variants (#1) May 2, 2019
package.json Add new variants (#1) May 2, 2019
yarn.lock Initial commit Apr 24, 2019

README.md

Tailwind CSS Dark Mode

Installation

yarn add tailwindcss-dark-mode --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 mode-dark class is applied to the <html> element. How you do that is up to you. dark-mode.js is provided as an option, which is a simple script that enables dark mode from 6 PM to 6 AM in the user's timezone.

Available Variants

Variants for dark mode are based on Tailwind's own variants...

  • dark
  • dark-hover
  • dark-focus
  • dark-active
  • dark-group-hover
  • dark-focus-within

... 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'],
  borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
  textColor: ['dark', 'dark-hover', 'dark-active']
}

PurgeCSS

If you are using PurgeCSS, you should either add mode-dark to the whitelist array...

whitelist: ['mode-dark']

... or add dark-mode.js to the content array.

content: [
  '**/*.js',
  './node_modules/tailwindcss-dark-mode/dark-mode.js'
]

Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the mode-dark class is only applied when the page is loaded.

You can’t perform that action at this time.