Export Text Styles for TailwindCSS v4
by Al
Convert and export Figma text styles to semantic ready-to-use TailwindCSS classes
Installs
29
Likes
3
Users
575
Views
339
Preview
About this plugin
This plugin converts your Figma text styles into Tailwind CSS v4+ code, ready to hand to your developers or use in your prototypes.
Generate semantic font classes with proper @theme variables and @layer utilities that match your design system perfectly. Supports custom base font sizes, intelligent class mapping and handles all typography properties including fonts, sizes, weights, spacing and more.
Key Features:
✅ TailwindCSS v4+ compatible output✅ Semantic class generation (font-heading-1, font-body, etc.)✅ Custom base font size support (15px, 16px, etc.)✅ Intelligent mapping to closest Tailwind classes✅ Ready-to-paste CSS with @theme and @layer structureBased on TailwindCSS standardsNotes:
Text styles must be local to file (not from external libraries)Custom fonts require manual import above @import "tailwindcss";
More import & export plugins plugins
View allhtml.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Paidby divRIOTS
Convert any website into fully editable Figma designs
Figma to HTML
by Figma2HTML
Convert Figma design to HTML
TinyImage Compressor
Paidby Hypermatic
Export/downsize compressed JPG, PNG, SVG, WebP, GIF, WebM, MP4, AVIF and PDF image files from Figma
Pitchdeck Presentation Studio
Paidby Hypermatic
Turn your Figma designs into animated slide decks or export them to PowerPoint/PDF