Tailwind Font Generator

Create beautiful typography with Tailwind CSS classes

Font Controls

Select a built-in Tailwind font family
Enter a Google Font name to generate custom font class
Select a predefined Tailwind font size
Enter a custom font size with units (px, rem, em)
Set the boldness of the font
Toggle between italic and normal
Control spacing between letters

Live Preview

Preview:

Note: Custom Google Fonts require adding the font to your project. The code below includes the import link.

Generated Tailwind Classes:

Google Font Import:

Tailwind CSS Implementation

HTML Code: