https://github.com/logan-larson/tailwind-light-dark
A Tailwind CSS plugin that generates shorthand utilities for light and dark mode color pairs
https://github.com/logan-larson/tailwind-light-dark
dark-mode tailwindcss
Last synced: about 1 year ago
JSON representation
A Tailwind CSS plugin that generates shorthand utilities for light and dark mode color pairs
- Host: GitHub
- URL: https://github.com/logan-larson/tailwind-light-dark
- Owner: logan-larson
- License: mit
- Created: 2025-03-13T23:12:28.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-14T13:31:55.000Z (over 1 year ago)
- Last Synced: 2025-03-14T13:34:29.184Z (over 1 year ago)
- Topics: dark-mode, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Light-Dark Plugin
A Tailwind CSS plugin that generates shorthand utilities for light and dark mode color pairs.
## Installation
```bash
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:
```css
@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:
```js
// tailwind.config.js
module.exports = {
darkMode: 'class', // This is required
// ...
plugins: [
require('tailwind-light-dark'),
// ...
],
}
```
Then use the generated utilities in your HTML:
```html
```
## 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](https://www.skeleton.dev/). 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.