Tailwindcss Palette Generator

!tailwind

Tailwindcss Palette Generator is an easy-to-use extension that allows you to automatically create a complete color palette from a single base color in your Tailwind CSS project. Specifically designed for Tailwind CSS v4, it significantly simplifies color management.

Why Use This Extension?

- ✅ Automatically generate your entire color palette from a single base color
- ✅ Different shade levels (50-900) for consistent visual design
- ✅ Full compatibility with Tailwind CSS v4
- ✅ Quick integration with minimal configuration

🎉 Installation

``bash

using pnpm

pnpm add -D tailwindcss-palette-generator@latest

using yarn

yarn add --dev tailwindcss-palette-generator@latest

using npm

npm i --save-dev tailwindcss-palette-generator@latest
`

!NPM
!GitHub Repo stars
!node-current
!GitHub last commit
!npm
!GitHub top language

👀 Basic Usage

Easily define the extension in your CSS file and specify your base colors:

`css
@import "tailwindcss";

@plugin "tailwindcss-palette-generator" {
primary: #FFBD00;
secondary: #FF6F00;
}
`

With this definition, you can now use your color palettes with shade levels from 50 to 900:

`html

Primary color

Secondary color (dark shade)

`

💡 Advanced Usage

$3

You can also generate color palettes programmatically:

`ts
import { getPalette } from 'tailwindcss-palette-generator/getPalette';

// Create palette with custom options
const palette = getPalette([
{
color: "rgb(255, 189, 0)", // required
name: "primary", // required
shade: 400
},
{
color: "rgba(255, 189, 0, 1)", // required
name: "secondary", // required
shade: 500
},
{
color: "hsl(44, 100%, 50%)", // required
name: "tertiary", // required
shade: 600
},
{
color: "#FFBD00", // required
name: "quaternary", // required
shade: 300, // you will set shades is mandatory
shades: [100, 200, 300, 400, 500]
}
]);

console.log(palette);
`

$3

`js
import { getPalette } from 'tailwindcss-palette-generator/getPalette';

const palette = getPalette({
color: "#FFBD00", // required
name: "primary", // required
shade: 300, // you will set shaders is mandatory
shades: [100, 200, 300, 400, 500]
});

export default {
// ...other configurations
theme: {
extend: {
colors: palette
}
}
}
``

🚀 Dependencies

- chroma.js - Library used for color manipulation