Generate a colour palette for Storybook based on custom colours in Tailwind

colours.mdx

import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'; import tailwindPreset from '../../tailwind.config.js';

Colours

All our CSS Custom Properties for colours are listed at "Swatches" column just below:

{Object.keys(tailwindPreset.theme.extend.colors).map((key) => { if (typeof tailwindPreset.theme.extend.colors[key] === 'string') { return ( ); } })}

Using Tailwind CSS utility classes

You can use colours with Tailwind CSS utility classes for Background Color & Text Color for example. But you can also use them for borders, gradients, etc. Go to Tailwind CSS documentation & quick search for anything!

All our Tailwind CSS colours names are just above next to their representation.

Screenshot