@bobthered/tailwindcss-palette-generator v4.0.0

Demo • Key Features • Installation • Usage • Examples

Demo

Interactive demo generating tailwindcss palettes

Key Features

• Generate color palette with as little as a hex value ( See Example )
• Generate multiple color palettes ( See Example )
• Customize the palette shade names & lightnesses ( See Example )
• Default color naming applied automatically or can be overwritten ( See Example )
• Zero (0) dependencies
• Typescript support
• Preserve Supplied Color

Installation

npm i @bobthered/tailwindcss-palette-generator

Options

The tailwindcssPaletteGenerator() function receives only one parameter.

Usage

Example - Basic

// 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

// 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

// 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

// 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: []
};