Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bobthered/tailwindcss-palette-generator
Quickly generate tailwind color palettes from a base color.
https://github.com/bobthered/tailwindcss-palette-generator
color generate generator palette plugin tailwind tailwind-css tailwindcss tailwindcss-plugin
Last synced: about 14 hours ago
JSON representation
Quickly generate tailwind color palettes from a base color.
- Host: GitHub
- URL: https://github.com/bobthered/tailwindcss-palette-generator
- Owner: bobthered
- License: mit
- Created: 2020-08-21T12:10:35.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-12T18:08:56.000Z (3 months ago)
- Last Synced: 2025-01-06T07:09:00.819Z (8 days ago)
- Topics: color, generate, generator, palette, plugin, tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://bobthered.github.io/tailwindcss-palette-generator
- Size: 2.05 MB
- Stars: 43
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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
```js
// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {
colors: tailwindcssPaletteGenerator('#FF0040')
}
},
plugins: []
};
```
```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: []
};
```