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.

Work in progress

ColorWind is in early development. If you find something that’s not working, open an issue on the GitHub repository.

✨ 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

Requires tailwindcss@^3.4.3.

⚡️ Installation

You can install ColorWind from NPM or JSR:

npm

From NPM:

npm install colorwind

From JSR:

npx jsr add @siguici/colorwind

Yarn

From NPM:

yarn add colorwind

From JSR:

yarn dlx jsr add @siguici/colorwind

pnpm

From NPM:

pnpm add colorwind

From JSR:

pnpm dlx jsr add @siguici/colorwind

Bun

From NPM:

bun install colorwind

From JSR:

bunx jsr add @siguici/colorwind

Deno

From NPM:

deno install npm:colorwind

From JSR:

deno add @siguici/colorwind

🔧 Configuration

Add ColorWind to your TailwindCSS configuration:

NPM

import colorwind from "colorwind";

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [colorwind],
};

JSR

import colorwind from "jsr:@siguici/colorwind";

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [colorwind],
};

🌈 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, where X 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 apply red-500 to both the text color and text decoration.
• You can also specify individual utilities: bg-blue for blue-500 background color and border-red for red-500 border color.

This separation enables more flexibility when working with complex designs.

🧑‍💻 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:

Code

<div class="text underline text-decoration red">
  This text is red with a red underline.
</div>

Render

This text is red with a red underline.

2. Primary button with background and text colors:

Code

<button class="bg-green-2 text-pure border-green-4">
  Primary Button
</button>

Render

Primary Button

3. Card with shadow and border:

Code

<div class="bg-blue-1 border-slate-2 shadow-lg">
  Card with a blue background and slate border.
</div>

Render

Card with a blue background and slate border.

4. Input field with outline and text colors:

Code

<input type="text" class="rounded bg-gray-0 text-blue-2 outline-green-3 border divide-gray-2" placeholder="Enter text here" />

Render

5. Icon with fill and stroke:

Code

<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>

Render