Keeping Figma and Tailwind code in sync

Overview

A Figma plugin that turns Tailwind's theme into native variables and styles, and back out as code.

5.5k people have run it on Figma Community (October 2026). It grew out of my own files: every new project began with typing Tailwind's theme in again. I designed and built it alone.

Problem

Tailwind's theme lived in code. In Figma, designers typed it in again.

Colours, spacing, type and shadows, one value at a time, with names that had to match the code by hand. Every change meant doing it again, and the file and the code drifted apart.

Collections

Adding dark mode meant rethinking where every token lives.

Version 1 wrote everything into one Figma collection. Then a user asked for a collection per kind, and I was adding dark mode. In Figma, a light and dark switch covers a whole collection, so one collection couldn't hold both. Splitting also broke a rule from my own README: don't change the collection structure once it's in Figma.

01 · One collection

Version 1: everything in one collection

444 variables in one list called TailwindCSS. Colours, spacing and type were told apart only by their names: colors/blue/500, spacing/4.

02 · Modes

Dark mode would have spread to spacing

Dark gives every colour a second value. In Figma that second value belongs to the whole collection, so spacing and radius would have carried a Dark column they'd never use.

03 · Seven collections

Version 2: seven collections, and only Colors goes dark

Since 12 November 2025: Colors, Spacing, Layout, Radius, Type, Shadow and Other. Returning users saw the change in What's New before anything else.

Line heights

Figma variables hold pixels, so each line height is set for its font size.

leading-1 is 16 px, written for 12 px text, not Tailwind's 4 px. When a user asked why, I explained the trade-off on the plugin's page.

Safe to stop

A run that writes hundreds of variables has to be safe to stop.

A run shows its progress, Abort removes only what that run made, and Update saves a version to Figma's history before it changes anything.

Back to code

Version 2.0 sends the tokens back out as code, and reads code back in.

CSS, a Tailwind theme, SCSS, JSON, or a prompt for an AI coding tool; an import shows what it found before it writes. A user had asked for it, and my FAQ had promised it.

Built alone

2.0 cut the welcome and the promo, and kept What's New.

Version 1 greeted people with confetti; in January a card promoted my other plugin. I built it alone with an AI editor, in two bursts: May to July 2025, and March 2026.

Landing page

The plugin got its own site, in the same brand.

I designed and built tailwindtokens.com in June 2025: one page that leads to the install button, with the plugin running in Figma, its features and a FAQ.

Outcome

5.5k people have run it, and their comments set the roadmap.

A collection per kind and export to code were both asked for in comments before they shipped. One promise is still open: Tailwind v4's colours.

Reflection

What I'd take to the next product