Documentation

Exporting a palette to Tailwind

A finished palette is useless if you have to retype it into a config by hand. Export turns the chosen direction into a set of tokens that drop straight into your project.

What gets exported

Every role - background, surface, primary, accent, text - is exported as its own variable, not as one flat list of hex codes. That way the palette stays meaningful in code, not just in the preview.

Formats

  • tailwind.config.jstheme extension with ready-made color names
  • CSS custom propertiesvariables like --color-accent
  • JSONfor passing into a design system or Figma Tokens

Why not just hex codes

A flat list of colors doesn’t survive the next design tweak. Named roles do: if the accent changes, you don’t need to hunt down every place it was used directly.