Guide

Using Tailwind colors in a design system

Tailwind makes color systematic. Here is how to map a palette to Tailwind’s theme and build consistent scales.

Add colors to your theme

Put your colors under theme.extend.colors in tailwind.config.js. The Tailwind palette generator exports a ready-to-paste object.

Build 50–900 scales

For each core color, generate evenly spaced steps with the shade & tint generator and map them to 50–900. Use lighter steps for backgrounds, mid steps for borders, and darker steps for text.

Name by role

Prefer role names (primary, surface, ink) over literal color names so you can re-theme without renaming classes.

Frequently asked questions

How do I add custom colors to Tailwind?

Add them under theme.extend.colors in tailwind.config.js. Use the Tailwind palette generator to export the object.

Should I name colors by hue or role?

Role-based names (primary, accent, surface) make re-theming easier than literal names like blue-500.