Text Styles to Tailwind CSS

About this plugin

Convert your Figma text styles into clean, responsive Tailwind CSS classes. Perfect for developers who want a smooth Figma → Tailwind workflow without manual mapping.✨ Features🔄 Convert Figma text styles into Tailwind v4 classes📱 Option to merge similar styles into one responsive class🎨 Uses Tailwind’s default utilities where possible⚡ Instant code export ready for your project📖 How It Works1. Name your text styles in FigmaUse a structure like:Mobile/heading-1Desktop/heading-1Tablet/heading-1The first segment (Mobile, Desktop, Tablet) becomes the responsive prefix.The second segment (eg: heading-1) becomes the Tailwind class name.2. Exported OutputWith Merge Enabled → generates one responsive class:@utility heading-1 {@apply text-xs font-normal tablet:text-sm desktop:text-base desktop:font-bold;}With Merge Disabled → generates separate classes per breakpoint:@utility mobile-heading-1 { @apply text-xs font-normal; }@utility tablet-heading-1 { @apply text-sm font-normal; }@utility desktop-heading-1 { @apply text-base font-bold; }Enjoy!