Package Exports

tailwindcss-dark-mode

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwindcss-dark-mode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.