Steve Kinney

Building Design Systems with Storybook

Creating a Color Palette from Your Tailwind Theme

Instead of referencing Tailwind’s default theme, we can look our our Tailwind configuration file. Add the following to src/colors.mdx.

import config from '../tailwind.config';

## Application Colors

<ColorPalette>
	{Object.entries(config.theme.extend.colors).map(([name, value]) => (
		<ColorItem key={name} title={name} colors={value} />
	))}
</ColorPalette>

Last modified on .