TTokkit
Open the tool

Figma → Tailwind

Convert your Figma tokens into a Tailwind config

Paste your brand color, pick a font, set your radius and stroke — watch them land on a real interface, then copy a clean Tailwind theme. No plugins, no export dance.

Try it free →

How it works

  1. 1
    Set your tokens

    Brand color, accent, typeface, corner radius, and stroke — all in one panel.

  2. 2
    See it on a real UI

    A live landing page, dashboard, and component gallery repaint as you tune.

  3. 3
    Copy the Tailwind config

    Grab a theme.extend config with your colors, radius, and font — ready to paste.

FAQ

Does this replace the Figma Tokens plugin?

It complements it. Tokkit also exports Figma Tokens (Tokens Studio) JSON and DTCG, so you can round-trip cleanly.

Is the Tailwind output v3 or v4?

The export uses the portable theme.extend form that works with Tailwind v3 and can be adapted to v4's CSS-first config.

Is it free?

Yes — the tool and all four export formats are free to use.