Getting Started ๐
Colorwind is a TailwindCSS plugin that simplifies the management of light and dark mode color schemes by dynamically adjusting colors for different utilities like text, background, borders, and more. With a single class, you can define colors that automatically adapt to both themes.
โจ Features
Section titled โโจ Featuresโ- Effortless Color Management: Automatically switch between light and dark mode color schemes using simple utility classes.
- All TailwindCSS Colors Supported: Choose from all available colors in TailwindCSS for your elements.
- Gradient and Opacity Support: Apply background gradients and control opacity seamlessly.
- Utility Flexibility: Use with text, background, border, outline, shadow, fill, stroke, and more.
๐ Requirements
Section titled โ๐ RequirementsโRequires tailwindcss@^3.4.3.
โก๏ธ Installation
Section titled โโก๏ธ InstallationโYou can install ColorWind
from NPM
or JSR
:
From NPM
:
yarn add colorwind
From JSR
:
yarn dlx jsr add @siguici/colorwind
From NPM
:
pnpm add colorwind
From JSR
:
pnpm dlx jsr add @siguici/colorwind
๐ง Configuration
Section titled โ๐ง ConfigurationโAdd ColorWind
to your TailwindCSS configuration:
import colorwind from "colorwind";
/** @type {import('tailwindcss').Config} */export default { plugins: [colorwind],};
import colorwind from "jsr:@siguici/colorwind";
/** @type {import('tailwindcss').Config} */export default { plugins: [colorwind],};
๐ Color System
Section titled โ๐ Color SystemโColorwind allows you to define colors using the following utility classes:
Utility | Description |
---|---|
text | color |
bg | background-color |
decoration | text-decoration-color |
border | border-color |
outline | outline-color |
accent | accent-color |
caret | caret-color |
divide | border-color |
fill | fill |
stroke | stroke |
shadow | --tw-shadow-color |
ring | --tw-ring-color |
You can specify light/dark color variations using a number system:
-
utility-color-X
, whereX
corresponds to the following:Value Light Mode Dark Mode 0
color-50
color-950
1
color-100
color-900
2
color-200
color-800
3
color-300
color-700
4
color-400
color-600
color
color-500
in both light and dark modes
Colorwind allows you to specify the utility and the color separately for more flexibility. For example:
text underline text-decoration red
will applyred-500
to both the text color and text decoration.- You can also specify individual utilities:
bg-blue
forblue-500
background color andborder-red
forred-500
border color.
This separation enables more flexibility when working with complex designs.
๐งโ๐ป Usage
Section titled โ๐งโ๐ป UsageโWith Colorwind, you can easily define and apply color utilities that adjust automatically between light and dark modes. Hereโs how you can use different classes for color management:
1. Text with decoration color:
Section titled โ1. Text with decoration color:โ<div class="text underline text-decoration red"> This text is red with a red underline.</div>
This text is red with a red underline.
2. Primary button with background and text colors:
Section titled โ2. Primary button with background and text colors:โ<button class="bg-green-2 text-pure border-green-4"> Primary Button</button>
3. Card with shadow and border:
Section titled โ3. Card with shadow and border:โ<div class="bg-blue-1 border-slate-2 shadow-lg"> Card with a blue background and slate border.</div>
Card with a blue background and slate border.
4. Input field with outline and text colors:
Section titled โ4. Input field with outline and text colors:โ<input type="text" class="rounded bg-gray-0 text-blue-2 outline-green-3 border divide-gray-2" placeholder="Enter text here" />
5. Icon with fill
and stroke
:
Section titled โ5. Icon with fill and stroke:โ<svg class="fill-green-2 stroke-red-0 w-24 h-24" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="10" /></svg>