Now playing — Text Styles to Tailwind CSSHover to reveal
A Figma community plugin that bridges the gap between design and development. Select any text layer or text style in Figma, and the plugin instantly generates the corresponding Tailwind CSS utility classes — including font size, weight, line height, letter spacing, and font family.
How It Works
Select a text layer or text style in your Figma file. The plugin reads the style properties and maps them to their Tailwind CSS equivalents. Copy the generated classes directly into your code — no manual translation needed.
Key Features
One-click conversion — select a text layer and get Tailwind classes instantly
Full style coverage — handles font size, weight, line height, letter spacing, and font family
Works with text styles — supports both local text styles and individual text layers
Copy-ready output — generated classes are ready to paste into your JSX or HTML
