https://github.com/ibodev1/tailwindcss-palette-generator
Color palette generation library for TailwindCSS.
https://github.com/ibodev1/tailwindcss-palette-generator
acikkaynak palette palette-generation tailwind tailwindcss tailwindcss-plugin
Last synced: 5 months ago
JSON representation
Color palette generation library for TailwindCSS.
- Host: GitHub
- URL: https://github.com/ibodev1/tailwindcss-palette-generator
- Owner: ibodev1
- License: mit
- Created: 2022-10-03T09:06:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-11-28T06:40:10.000Z (6 months ago)
- Last Synced: 2025-11-29T14:38:46.368Z (6 months ago)
- Topics: acikkaynak, palette, palette-generation, tailwind, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tailwindcss-palette-generator
- Size: 853 KB
- Stars: 19
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwindcss Palette Generator
**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
```
[](https://badge.fury.io/js/tailwindcss-palette-generator)
## 👀 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
### Programmatic Usage with JavaScript/TypeScript
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);
```
### Usage with Tailwind Config File
```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
}
}
}
```