Tailwind Light-Dark Plugin

A Tailwind CSS plugin that generates shorthand utilities for light and dark mode color pairs.

Installation

npm install tailwind-light-dark
# or
yarn add tailwind-light-dark

Usage

Tailwind CSS v4

Add the plugin to your app.css or app.postcss file:

@import "tailwindcss";

@plugin 'tailwind-light-dark';

/* Required: Make dark mode class based */
@custom-variant dark (&:where(.dark, .dark *));

/* ... */

Tailwind CSS v3

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  darkMode: 'class', // This is required
  // ...
  plugins: [
    require('tailwind-light-dark')({ version = 3 }),
    // ...
  ],
}

Then use the generated utilities in your HTML:

<!-- Background colors -->
<div class="bg-red-200-700">
  <!-- This will be red-200 in light mode and red-700 in dark mode -->
</div>

<!-- Text colors -->
<div class="text-blue-300-900">
  <!-- This will be blue-300 in light mode and blue-900 in dark mode -->
</div>

<!-- White/black shortcuts -->
<div class="bg-white-black text-black-white">
  <!-- White background with black text in light mode -->
  <!-- Black background with white text in dark mode -->
</div>

Available Utilities

This plugin generates the following utility types:

• bg-{color}-{lightShade}-{darkShade} - Background colors
• text-{color}-{lightShade}-{darkShade} - Text colors
• border-{color}-{lightShade}-{darkShade} - Border colors
• decoration-{color}-{lightShade}-{darkShade} - Text decoration colors
• outline-{color}-{lightShade}-{darkShade} - Outline colors
• shadow-{color}-{lightShade}-{darkShade} - Box shadow colors
• inset-shadow-{color}-{lightShade}-{darkShade} - Inset box shadow colors
• ring-{color}-{lightShade}-{darkShade} - Ring shadow colors
• inset-ring-{color}-{lightShade}-{darkShade} - Inset ring shadow colors
• accent-{color}-{lightShade}-{darkShade} - Accent colors
• caret-{color}-{lightShade}-{darkShade} - Caret colors
• fill-{color}-{lightShade}-{darkShade} - SVG fill colors
• stroke-{color}-{lightShade}-{darkShade} - SVG stroke colors
• from-{color}-{lightShade}-{darkShade} - Gradient from colors
• to-{color}-{lightShade}-{darkShade} - Gradient to colors

Special Utilities

The plugin also provides convenient white/black pairs:

• bg-white-black / bg-black-white
• text-white-black / text-black-white
• border-white-black / border-black-white
• fill-white-black / fill-black-white
• stroke-white-black / stroke-black-white
• from-white-black / from-black-white
• to-white-black / to-black-white

License

MIT

Inspiration

This plugin was heavily inspired by SkeletonUI. They provide light-dark color pairings for their own themed colors (e.g. primary-100-900, secondary-600-400, surface-950-50, etc.) and I wanted light-dark pairings available for every tailwind color.