Integrating design tokens with Tailwind CSS

WHAT THIS TESTS Whether you preserve a single source of truth when a utility-first framework wants its own config, and can weigh integration against running parallel systems.

A GOOD ANSWER COVERS The core idea is to derive Tailwind's design values from your tokens so there is one source of truth. Concretely, generate Tailwind's theme, colors, spacing, radii, from the token output, either by producing the JS theme config from tokens in older versions, or by mapping tokens to the CSS-based theme and custom properties in Tailwind v4. Then utility classes and any direct token-consuming CSS resolve to the same values. Pros of generating the config: no drift, designers change a token and every utility updates, and you keep Tailwind's ergonomics and purging. Cons: a build step couples tokens to Tailwind and requires a mapping layer, and some token concepts do not map cleanly to utilities. The alternative, a parallel system where tokens live separately from Tailwind's defaults, is quick to start but guarantees the two diverge, producing inconsistent UI and double maintenance.

COMMON WRONG ANSWERS Maintaining tokens and Tailwind values by hand in two places guarantees drift. Abandoning tokens because Tailwind has a config ignores multi-platform needs. Duplicating the palette in both systems. Assuming integration is free, ignoring the mapping and build coupling cost.

LIKELY FOLLOW-UPS How does v4 change this? It moves theming into CSS custom properties, so tokens can map directly. How do you expose tokens as utilities and as vars? Generate both from the same source. What about arbitrary values bypassing tokens? Lint or restrict arbitrary values.

ONE CONCRETE EXAMPLE Tokens define a color palette and spacing scale. A build step writes Tailwind's theme from those tokens, so a class like bg-primary and a direct rule using var(--color-primary) resolve to the same value. When design updates the primary token, both the utility and the custom property update on the next build, with no manual sync between the token source and the Tailwind config.