Tint Color Plugin for Tailwind CSS

A Tailwind CSS plugin that adds tint color utilities using CSS filters. Perfect for changing the color of icons, images, and graphics without needing separate colored versions.

Installation

npm install --save-dev tailwind-tint-color

Usage

Tailwind CSS v4

Add the plugin to your main stylesheet:

/* app.css */
@import "tailwindcss";
@plugin "tailwind-tint-color";

Tailwind CSS v3

Add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwind-tint-color'),
    // ...
  ],
}

Then use the tint-* utilities in your HTML:

<!-- Using predefined colors -->
<img src="icon.svg" class="tint-red-500" alt="Red tinted icon" />

<!-- Using arbitrary values -->
<img src="icon.svg" class="tint-[#ff6b6b]" alt="Custom color tinted icon" />
<img src="icon.svg" class="tint-[rgb(34,197,94)]" alt="RGB color tinted icon" />

Credits

This plugin is based on the CSS filter generator by Barrett Sonntag which converts colors to CSS filters.

• CSS filter generation: Based on Barrett Sonntag's approach
• Color conversion algorithms: Based on W3C CSS Color Module Level 4 specifications:
  • HSL to RGB conversion
  • sRGB companding
  • OKLAB/OKLCH color spaces

License

MIT