On this page
About Figma Tailwindcss
Figma Tailwindcss is a free Figma plugin published by Jan D'Hollander in 2019. It works in Figma Design and has 53,069 users and 616 likes on the Figma Community. It ranks #8 in Variables & Tokens and #12 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:
- colors
- font-families
- text-sizes
- box-shadows
- borded-radius
Full docs: https://github.com/jan-dh/figma-tailwindcss/
What's new
Version 15 ยท released May 22, 2024
- Updated border radius calculations to use the selected base font size
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.
Where Figma Tailwindcss ranks
Figma Tailwindcss alternatives
- 1
Tokens Studio for Figma
by Jan Six
369K users7.6KFree + paid featuresThe scalable design tokens solution for Figma
- 2
Design System Organizer
by Arthur
205K users3.1KFree + paid featuresExtended swap for variables/styles/components, export variables/styles, bulk-audit library & mockups
- 3
Styles & Variables Organizer
by Chenmu Wu
140K users3.3KFree + $15 upgradeApply styles and variables to all your designs with one click!
- 4
Export/Import Variables
by Honza Toman
91K users1.7KFreeExport variables from one file and import them to another. Supports modes, references, and scopes.
- 5
Styles to Variables
by Yann-Edern Gillet
90K users1.1KFreeConvert your Figma Styles into Variables
- 6
Variables Pro
by Figterate
82K users479FreeVariables Pro | Swap, Import, Export Variables
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 Tokens Studio for Figma, Design System Organizer and Styles & Variables Organizer. Compare all of them on the best Figma plugins for variables & tokens.
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.
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>Want it featured on figmaplugins.co? Submit it for review