Export Tailwind classes from Figma

When I want to turn a Figma design into code, I often use the plugin “Figma to Code (HTML, Tailwind, Flutter, SwiftUI)”. It lets me quickly and easily generate Tailwind CSS classes for my design. That saves time and makes implementation considerably easier. In this guide I’ll walk you through it step by step.

1. Install the plugin

First we need to install the plugin in Figma. Here’s how I do it – and how you can too:

• Open your Figma project.
• Click the “Resources” icon at the top (the three cubes) or press Shift + I.
• Search for “Figma to Code” in the search field.
• Select the plugin “Figma to Code (HTML, Tailwind, Flutter, SwiftUI)” and click “Install”.

Now the plugin is ready to go!

2. Select the design

Next I select the design element or frame I want to generate Tailwind classes for. You can do exactly the same:

• Open your Figma document.
• Click the element you want to export – it can be a button, a container or even a whole frame.

A clearly structured design matters here, because the plugin can work with it better.

3. Launch the plugin

Now I launch the plugin. Here’s how:

• Right-click the selected design element.
• In the menu, go to “Plugins” > “Figma to Code”.
• The plugin opens in a panel on the right-hand side.

Just launch the plugin the same way and you’re ready to go.

4. Choose the export options

Inside the plugin I see several export options, including HTML, Tailwind CSS, Flutter and SwiftUI. Since I work with Tailwind, I choose “Tailwind CSS”. You can pick this option too if you want to use Tailwind.

5. Generate the Tailwind classes

Once I’ve chosen the Tailwind CSS option, the plugin analyses my design and shows me the matching Tailwind classes. Here’s an example I got for a button:

<div class="rounded bg-blue-500 p-4 text-white shadow-md">Button Text</div>

[Top]