0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#4 in Variables & Tokens

Figma Tailwindcss

Export design tokens to tailwind theme

by Jan D'Hollander

users
53K
likes
606
saves
9.3K
comments
4
Open in Figma
FreeWorks inFigma Design
Price
Free
Latest version
v17 ยท Jan 29, 2026
First published
Dec 8, 2019
Publisher
Jan D'Hollander
Features

What Figma Tailwindcss does

Summarised from Jan D'Hollander's description on the Figma Community.

  • colors

  • font-families

  • text-sizes

  • box-shadows

  • borded-radius

On this page
Overview

About Figma Tailwindcss

Figma Tailwindcss is a free Figma plugin published by Jan D'Hollander in 2019. It works in Figma Design and has 52,586 users and 606 likes on the Figma Community. It ranks #4 in Variables & Tokens and #10 in Developers on our lists.

In the developer's words

Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.

Creating your theme

The plugin gets it's info from the Local Styles. At this point it picks up:

  1. colors
  2. font-families
  3. text-sizes
  4. box-shadows
  5. borded-radius

Full docs: https://github.com/jan-dh/figma-tailwindcss/

Changelog

What's new

Version 17 ยท released Jan 29, 2026

  • Added REM/px picker, and ability to set default border-radius
Trust

Permissions and privacy

Network access

Figma Tailwindcss declares no network access, so it runs entirely inside Figma and can't send your file anywhere.

Extra permissions

None beyond the standard access to the file you run it in.

Read from the plugin's published manifest. Questions about data handling go to the developer's support page.

Rankings

Where Figma Tailwindcss ranks

Compare

Figma Tailwindcss alternatives

  1. 1

    Styles & Variables Organizer

    by Chenmu Wu

    134K users3.2KFree + $15 upgrade

    Apply styles and variables to all your designs with one click!

    View details
  2. 2

    Export/Import Variables

    by Honza Toman

    85K users1.7KFree

    Export variables from one file and import them to another. Supports modes, references, and scopes.

    View details
  3. 3

    Design Tokens

    by Lukas Oppermann

    62K users1.9KFree

    Export design tokens to JSON or GitHub.

    View details
  4. 4

    Kigen

    by vijay verma

    34K users1.7KFree

    Create Design System Variables, Tokens, Styles and more with documentation

    View details
  5. 5

    variables2css

    by Kai-Uwe Hella

    28K users353Free

    Convert Figma Variables to CSS, Sass, Tailwind, Json, Javascript (Styled-Components), Less or Stylus

    View details
  6. 6

    Variables manager: reorder and copy variables between files

    by Figgy

    25K users188Free + paid features

    Save, copy, and reorder variables across files easily

    View details
FAQ

Figma Tailwindcss FAQ

What does Figma Tailwindcss do?

Export design tokens to tailwind theme. It's a Figma plugin by Jan D'Hollander that runs in Figma Design.

Is Figma Tailwindcss free?

Yes. Figma Tailwindcss is free to install and run from the Figma Community, with no paid tier listed.

Is Figma Tailwindcss safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Figma Tailwindcss declares no network access, so it runs entirely inside Figma and can't send your file anywhere. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Figma Tailwindcss?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Figma Tailwindcss?

By user count, the closest alternatives are Styles & Variables Organizer, Export/Import Variables and Design Tokens. Compare all of them on the best Figma plugins for variables & tokens.

For developers

Built this plugin?

Use this page as a landing page for Figma Tailwindcss: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Figma Tailwindcss on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/figma-tailwindcss/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Figma Tailwindcss on figmaplugins.co" width="220" height="48"></a>