On this page
About Tailwind CSS
Tailwind CSS is a free Figma plugin published by Florentin Eckl in 2019. It works in Figma Design and has 36,058 users and 440 likes on the Figma Community. It ranks #20 in Developers on our lists.
In the developer's words
Generate styles and other cool stuff straight out of your tailwind config file? This plugin already supports adding your color styles and has more features coming up in the future ~
Usage
Method 1 - Use the default values:
- Press "Load default" (next to "Add Styles")
Method 2 - Generate a resolved config:
- Navigate to your tailwind project
- Run npx tailwind.json
- Grab the generated tailwind.json
If you have any other issue or suggestion please make an issue :)
https://github.com/ecklf/tailwindcss-figma-plugin
Made with React, Tailwind CSS and ❤️
What's new
Version 10 · released Mar 27, 2020
- Fix RGBA hex values (thanks to leinardi)
Permissions and privacy
Network access
This plugin's manifest doesn't declare its network access, which is common for older plugins. Figma shows a warning on the Community page for plugins like this.
Extra permissions
None beyond the standard access to the file you run it in.
Read from the plugin's published manifest.
Where Tailwind CSS ranks
Tailwind CSS alternatives
- 1
Tokens Studio for Figma
by Jan Six
369K users7.6KFree + paid featuresThe scalable design tokens solution for Figma
- 2
Zeplin
by Zeplin Crew
293K users2.9KFree + paid featuresDesign tools are for designing. Zeplin is for clear, structured design delivery.
- 3
DesignDoc [Spectral]
by Marka Plugin Dev
141K users3.2KFree📐 Effortlessly hand off your Figma designs to the development team
- 4
Inspect Styles
by max.denaro
139K users4KFreeInspect styles from Figma and transform to CSS
- 5
Figma Exporter
by JerryKhw
117K users516FreeEasily export assets as PNG/JPG/WebP/SVG/PDF for Web, Android, Flutter, iOS, React Native
- 6
Tailwind CSS Color Generator
by Erik de Vries
112K users3.7KFreeCreate custom Tailwind CSS color scales based on a given Hex code or HSL color
Tailwind CSS FAQ
What does Tailwind CSS do?
It's a Figma plugin by Florentin Eckl that runs in Figma Design.
Is Tailwind CSS free?
Yes. Tailwind CSS is free to install and run from the Figma Community, with no paid tier listed.
How do I install Tailwind CSS?
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 Tailwind CSS?
By user count, the closest alternatives are Tokens Studio for Figma, Zeplin and [DesignDoc [Spectral]](/plugins/designdoc-spectral-measures-annotations-and-handoff/). Compare all of them on the best Figma plugins for developers.
Built this plugin?
Use this page as a landing page for Tailwind CSS: 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/tailwind-css/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Tailwind CSS on figmaplugins.co" width="220" height="48"></a>