Tailwind Light-Dark Logo

TailwindCSS Light-Dark Plugin

bg-emerald-100 dark:bg-emerald-900
bg-emerald-100-900
Get Started See Examples
app.css
Tailwind Version: 
// Add the plugin to your app.css file
@import tailwind;

@plugin 'tailwind-light-dark';

@custom-variant dark (&:where(.dark, .dark *));
Zero config required
All color utilities supported

Simplify Your Dark Mode Workflow

Traditional Approach

<div class="bg-blue-200
    dark:bg-blue-800 
    text-blue-800
    dark:text-blue-200 
    border-gray-300
    dark:border-gray-700">
    Content
</div>

With Light-Dark Plugin

<div class="bg-blue-200-800 
    text-blue-800-200 
    border-gray-300-700">
    Content
</div>

Examples

Toggle dark mode to see the magic happen

Background Colors

bg-red-100-900
bg-blue-200-800
bg-green-300-700
bg-purple-400-600

Text Colors

text-red-700-300
text-blue-600-300
text-green-800-200
text-purple-900-100

Border Colors

border-red-500-300
border-blue-600-200
border-green-700-100
border-yellow-400-600

Ring & Shadow Colors

shadow-purple-600-400

SVG Fill & Stroke

Form Elements

Accent color changes

UI Component Example

Notification

Your profile has been updated successfully. All changes have been saved.

Custom Colors

The plugin works seamlessly with your custom color palette. Define colors in your theme and use the same shorthand syntax.

Define custom colors in your theme:

app.css
Tailwind Version: 
@theme {
  --color-avocado-50: oklch(0.99 0 0);
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --color-avocado-700: oklch(0.42 0.11 118.34);
  --color-avocado-800: oklch(0.32 0.09 118.34);
  --color-avocado-900: oklch(0.22 0.06 118.34);
  --color-avocado-950: oklch(0.12 0.03 118.34);
}

Custom color examples:

bg-avocado-100-900
bg-avocado-200-800
bg-avocado-300-700
bg-avocado-400-600

Custom UI component with avocado theme:

Avocado Notification

Avocados are fruits, not vegetables.

Color spectrum:

bg-avocado-50-950
bg-avocado-100-900
bg-avocado-200-800
bg-avocado-300-700
bg-avocado-400-600
bg-avocado-950-50
bg-avocado-900-100
bg-avocado-800-200
bg-avocado-700-300
bg-avocado-600-400

Installation & Setup

1

Install the package

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

Configure with Tailwind

app.css
Tailwind Version: 
// Add the plugin to your app.css file
@import tailwind;

@plugin 'tailwind-light-dark';

@custom-variant dark (&:where(.dark, .dark *));
3

Start using the plugin!

html
<div class="bg-stone-50-950 h-screen w-screen grid place-items-center">
    <h1 class="text-black-white">Hello World</h1>
    <button
        class="bg-blue-300-700 hover:bg-blue-400-600 text-black-white"
    >
        Click me
    </button>
</div>

Ready to simplify your dark mode workflow?

Get started with tailwind-light-dark today and write less code for beautiful dark mode experiences.

GitHub npm Package Explore Examples