Tailwindcss Palette Generator
Quickly generate tailwindcss color palettes from a base color or colors.
[Demo](#demo) • [Key Features](#key-features) • [Installation](#installation) • [Usage](#usage) • [Examples](#examples)
## Demo
Interactive [demo](https://bobthered.github.io/tailwindcss-palette-generator) generating tailwindcss palettes
## Key Features
- Generate color palette with as little as a hex value ( [See Example](#example-1) )
- Generate multiple color palettes ( [See Example](#example-2) )
- Customize the palette shade names & lightnesses ( [See Example](#example-3) )
- Default color naming applied automatically or can be overwritten ( [See Example](#example-4) )
- Zero (0) dependencies
- Typescript support
- Preserve Supplied Color
## Installation
```
npm i @bobthered/tailwindcss-palette-generator
```
## Options
The `tailwindcssPaletteGenerator()` function receives only one parameter.
| Option Type | Type |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `String` | `string` |
| `Array of Strings` | `string[]` |
| `Object` | {
colors?: string[],
names?: string[],
preserve?: boolean,
shades?: Record[],
} |
## Usage
### Example - Basic
```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: tailwindcssPaletteGenerator('#FF0040')
}
},
plugins: []
};
```
### Example - Multiple Colors
```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: tailwindcssPaletteGenerator(['#FF0040', '#FFBB00'])
}
},
plugins: []
};
```
### Example - Custom Shades and Lightness
```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: tailwindcssPaletteGenerator({
colors: ['#FF0040'],
shades: [
{ name: 'light', lightness: 95 },
{ name: 'normal', lightness: 46 },
{ name: 'dark', lightness: 7 }
]
})
}
},
plugins: []
};
```
### Example - Override color names
```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: tailwindcssPaletteGenerator({
colors: ['#FF0040', '#FFBB00'],
names: ['red', 'yellow']
})
}
},
plugins: []
};
```
