🎨 tailwindcss-hexcolor

Write arbitrary color utilities in Tailwind CSS without square bracket syntax ([]).

Supports HEX, RGB, RGBA, HSL, HSLA, and CSS color-mix() for Tailwind CSS v3 & v4.

✨ Clean Syntax • 🚀 Zero Configuration • ⚡ Smart Caching • 🎨 Multiple Color Formats

✨ Features

• 🚀 No [] syntax
• 🎨 Supports HEX, RGB(A), HSL(A), color-mix()
• ⚡ Zero configuration
• 🔄 Automatic scanning & rebuilds
• 💾 Smart caching
• ✅ Tailwind CSS v3 & v4 compatible

📦 Installation

npm install tailwindcss-hexcolor

🚀 Setup

Tailwind CSS v4

@import "tailwindcss";

@plugin "tailwindcss-hexcolor";

Tailwind CSS v3

module.exports = {
  plugins: [
    require("tailwindcss-hexcolor")(),
  ],
};

🎨 Examples

HEX

<div class="bg-6366f1 text-ffffff border-e5e7eb"></div>

background-color: #6366f1;
color: #ffffff;
border-color: #e5e7eb;

RGB

<div class="bg-rgb-59-130-246"></div>

background-color: rgb(59,130,246);

RGBA

<div class="bg-rgba-59-130-246-0.5"></div>

background-color: rgba(59,130,246,0.5);

HSL

<div class="text-hsl-220-100-50"></div>

color: hsl(220,100%,50%);

HSLA

<div class="border-hsla-220-100-50-0.5"></div>

border-color: hsla(220,100%,50%,0.5);

CSS color-mix()

<div class="bg-mix-in-srgb--red-40--blue"></div>

background-color: color-mix(in srgb, red 40%, blue);

🛠 Supported Utilities

| Utility | CSS Property | |----------|--------------| | bg-* | Background Color | | text-* | Text Color | | border-* | Border Color | | outline-* | Outline Color | | ring-* | Ring Color | | shadow-* | Shadow Color | | fill-* | SVG Fill | | stroke-* | SVG Stroke | | accent-* | Accent Color | | caret-* | Caret Color | | decoration-* | Text Decoration Color | | placeholder-* | Placeholder Color | | divide-* | Divide Color | | from-* | Gradient Start | | via-* | Gradient Middle | | to-* | Gradient End |

🤝 Contributing

Contributions and feature requests are welcome!

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a Pull Request

📄 License

MIT License.

Made with ❤️ by Sneh Moradia

⭐ If this project helped you, consider giving it a star!