Skip to content

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.

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

Requires tailwindcss@^3.4.3.

You can install ColorWind from NPM or JSR:

From NPM:

Terminal window
npm install colorwind

From JSR:

Terminal window
npx jsr add @siguici/colorwind

Add ColorWind to your TailwindCSS configuration:

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

Colorwind allows you to define colors using the following utility classes:

UtilityDescription
textcolor
bgbackground-color
decorationtext-decoration-color
borderborder-color
outlineoutline-color
accentaccent-color
caretcaret-color
divideborder-color
fillfill
strokestroke
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:

    ValueLight ModeDark Mode
    0color-50color-950
    1color-100color-900
    2color-200color-800
    3color-300color-700
    4color-400color-600
    colorcolor-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.

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:

<div class="text underline text-decoration red">
This text is red with a red underline.
</div>
<button class="bg-green-2 text-pure border-green-4">
Primary Button
</button>
<div class="bg-blue-1 border-slate-2 shadow-lg">
Card with a blue background and slate border.
</div>
<input type="text" class="rounded bg-gray-0 text-blue-2 outline-green-3 border divide-gray-2" placeholder="Enter text here" />
<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>