tailwindcss-dark-mode's Introduction

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.

Recommend Projects

cctoni / tailwindcss-dark-mode Goto Github PK