Tailwind Dark

Tailwind CSS plugin to generate dark variant.

Installation

npm install tailwind-dark --save-dev

usage

plugins: [
    require('tailwind-dark'),
    // ...
],

Note

By default the dark variant is not enabled to none of the tailwindcss utilities. To use the dark variant add it at the end of any utility you want to use it with. You can toggle dark using the class theme-dark at the most parent element of your component

variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'dark'],
    // ...
},

This plugin generates the following utilities:

.theme-dark .dark\:bg-white {
  --bg-opacity: 1;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}
 
.theme-dark .dark\:bg-black {
  --bg-opacity: 1;
  background-color: #000000;
  background-color: rgba(0, 0, 0, var(--bg-opacity));
}
...

Example

<div>
    <div class="grid grid-cols-2 gap-10">
        <div class="h-60 bg-gray-100 dark:bg-gray-900">
 
        </div>
        <div class="h-60 bg-gray-900 dark:bg-gray-100">
 
        </div>
    </div>
</div>

To active the dark mode use the theme-dark on the parent element of your component.

<div class="theme-dark">
    <div class="grid grid-cols-2 gap-10">
        <div class="h-60 bg-gray-100 dark:bg-gray-900">
 
        </div>
        <div class="h-60 bg-gray-900 dark:bg-gray-100">
 
        </div>
    </div>
</div>