Skip to content
Export Text Styles for TailwindCSS v4

Export Text Styles for TailwindCSS v4

by Al

Convert and export Figma text styles to semantic ready-to-use TailwindCSS classes

FreeFigma

Installs

29

Likes

3

Users

575

Views

339

Preview

Export Text Styles for TailwindCSS v4 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 all