TailwindCSS Palette Generator

As someone who works extensively with Tailwind CSS, managing color palettes manually across design systems can become a repetitive and error-prone process—especially when striving for consistency across multiple shades.

That's where tailwindcss-palette-generator really shines.

It automatically generates full color palettes from just a few base colors. With just a couple of lines, you get all the shades (from 50 to 900) you’d expect from a professional-grade design system—instantly and consistently.

Usage

@import "tailwindcss";
@plugin 'tailwindcss-palette-generator' {
 primary: '#264653';
 secondary: '#2a9d8f';
}

This gives you:

<div class="bg-primary-500">Primary color</div>
<div class="text-secondary-700">Secondary color with darker shade</div>