Tailwind CSS Font Size Generator

About this plugin

Transform your design workflow and save a ton of time with the Tailwind Font Size Generator plugin for Figma! This intuitive plugin allows you to seamlessly generate font sizes and font styles using the default Tailwind CSS font scale, ensuring your designs stay consistent and aligned with the popular utility-first framework.

Key Features:

1. Tailwind Integration: Access the complete range of default Tailwind CSS font sizes directly within Figma.
2. Consistency and Efficiency: Maintain design consistency across your projects by using standardised font sizes.
3. Generate text styles: Automatically generates text styles for you so you don't have to do manual work. You can also select a frame and initialize the styles from it. Preferably frames generated with this plugin.
4. Overwrite existing styles: If you have text nodes linked to a text style then overwriting the text style will apply the new styles to the linked nodes.
5. Customisability: You can drag to reorder, add or remove styles. Rename titles. Change font size, line height and letter spacing per style.
6. User-Friendly Interface: Easy to navigate, the plugin integrates smoothly into your Figma workspace.
7. Real-Time Updates: Instantly apply and adjust font sizes, seeing changes in real time as you design.
8. Copy code: Switch to dev mode to copy the styles in code for use in your tailwind.config file. Choose between the config.js (v3) or theme variables (v4) style.

As a developer you can use this package to read the Figma file and export all the styles this plugin generates into your codebase.

https://github.com/tiersept/figma-export-tailwind-font-size