From Figma variables to a Tailwind CSS theme with light and dark modes

Hi everyone! I design interfaces and build them myself, and I got tired of copying values from Figma into my Tailwind theme after every change. So I made tailwind-dictionary, a free open-source CLI.

How it works:

1. In the Variables panel, right-click a collection → Export modes. Figma gives you one *.tokens.json file per mode.
2. Point tailwind-dictionary to those files in one config.json.
3. Run npx tailwind-dictionary and get a Tailwind CSS theme: colors, radii, spacing, fonts. Light and Dark modes become themes that switch with data-theme.

References between variables are resolved, color objects become hex, and numbers get units, so rounded-4 is exactly 4px like in the design.

You can try it without installing anything: paste your own Figma export into the playground and see the theme and a light/dark preview. Everything runs in the browser, your tokens aren't sent anywhere.

The design system I built it for is free in Figma Community too: styles and components.

Links: GitHub · How to export variables from Figma

Figma doesn't export text styles and shadows (they're styles, not variables), so I describe those as tokens by hand. If your export looks different from what the package expects, I'd love to hear about it.