Tailwind ships with twenty-something stock palettes, which is great until you need a sixth one for your brand. The temptation is to dump primary, secondary, accent, light, and dark into the theme.colors object and call it done. That works, but it leaves money on the table.
Real Tailwind tokens come in scales. Start from the five base colors, then generate ten steps for each — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — using a deterministic lightness ramp. The 500 step is your seed. The 50 step is light, the 950 step is dark. Everything in between is interpolated.
Why bother? Because Tailwind utilities like bg-primary-100 / text-primary-900 give you the hover, focus, disabled, dark, and decorative states for free. A flat theme.colors.primary forces you to invent custom utilities every time you need a tint or shade.
Use HSL math, not RGB. Convert the seed to HSL once, then change only L for each step (60, 50, 45, 40, 35, 30, 22, 15, 10, 6 are reasonable lightness anchors for a 500-base). Saturation can drop slightly at the extremes for richer-looking neutrals. The generator above outputs the five base colors; pipe them through a small build script that emits the full ten-step scale.
Dark mode is where the work pays off. With a full scale, your dark variants are bg-primary-200 / text-primary-100 (light mode) becoming bg-primary-800 / text-primary-50 (dark mode). No new tokens. No CSS overrides. Tailwind's dark: prefix does the heavy lifting because the scale already exists.
Watch out for two anti-patterns. First, do not bind your scale to specific UI roles ('primary-button', 'secondary-button') — bind it to brand colors and let utilities handle the role mapping. Second, do not generate a 'gray' scale alongside your brand. Use Tailwind's stock slate or zinc, picked once, and only override if your brand has a strong hue tint in neutrals.
Five base colors. Ten-step scale per base. One source of truth. Your design system stops fighting Tailwind and starts riding it.