TailwindCSS Light-Dark Plugin
bg-emerald-100 dark:bg-emerald-900
bg-emerald-100-900
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.