ColorWind is a powerful TailwindCSS plugin that makes managing light and dark color schemes easy, expressive, and automatic.
This repository contains the full source code, plugin package, and documentation for the project.
π¦ The published plugin lives inside
/packages/colorwind
Interactive usage guide, theming examples, and live playground:
Package | Description | Registry |
---|---|---|
colorwind |
TailwindCSS plugin for automatic color theming | NPM, JSR |
Install from your preferred package manager:
npm install colorwind
Or use JSR:
npx jsr add @siguici/colorwind
Then, register the plugin in your Tailwind config:
import colorwind from 'colorwind';
export default {
plugins: [colorwind],
};
- Simplifies light/dark mode theming with one class.
- Uses intuitive naming for color intensity and adaptation.
- Supports all Tailwind color utilities, including gradients and opacity.
- Automatically inverts colors when needed using the
-reverse
suffix.
Read the full plugin usage guide at colorwind.js.org/guides
To contribute or run locally:
pnpm install
pnpm dev
Then visit localhost:4321
to preview the documentation locally.
Found a bug or have a feature request?
- Open an issue on GitHub Issues
- Or submit a PR β we welcome contributions!
Built with β€οΈ using TailwindCSS, Astro, and Starlight.