Getting Started π
ColorWind is a TailwindCSS plugin simplifying light/dark color scheme management with intuitive class names.
π Requirements
Requires tailwindcss@^3.4.3.
β‘οΈ Installation
You can install ColorWind
from NPM
or JSR
:
From NPM
:
From JSR
:
From NPM
:
From JSR
:
From NPM
:
From JSR
:
From NPM
:
From JSR
:
From NPM
:
From JSR
:
π§ Configuration
Add ColorWind
to your TailwindCSS configuration:
π§βπ» Usage
Simply use the provided class names in your HTML
or JSX
to apply color styles that adapt to the light or dark mode.
Using Color Classes
Use the following class convention to apply color styles that adapt to light/dark themes:
-
variant-color-[light|dark]-X
where variant is aTailwindCSS
variant (text
,bg
,border
, etc.), color is the color name (e.g.,blue
,red
,green
, etc.), and X corresponds to:- 0: color-50 in light mode or color-950 in dark mode
- 1: color-100 in light mode or color-900 in dark mode
- 2: color-200 in light mode or color-800 in dark mode
- 3: color-300 in light mode or color-700 in dark mode
- 4: color-400 in light mode or color-600 in dark mode
-
You can also use variant-color for variant-color-500 (adapts to theme)