Font Size, Family, and Weight
Tailwind provides utility classes to easily control text size, font family, and weight. This gives you powerful control over typography without writing custom CSS.
1. Font Sizes
Use text-{size} to set font size. Example sizes:
text-xs /* Extra small */
text-sm /* Small */
text-base /* Default body text */
/* Large */
text-xl /* Extra Large */
text-2xl to text-9xl /* Larger heading sizes */
This is text-xs
This is text-base
This is text-4xl
2. Font Family
Use font-sans, font-serif, or font-mono:
font-sans /* Default: Inter, system-ui, etc. */
font-serif /* Georgia, Times New Roman */
font-mono /* Menlo, Courier New */
This is sans-serif font
This is serif font
This is mono font
3. Font Weight
Control font weight with font-{weight}:
font-thin /* 100 */
font-extralight /* 200 */
font-light /* 300 */
font-normal /* 400 */
font-medium /* 500 */
font-semibold /* 600 */
font-bold /* 700 */
font-extrabold /* 800 */
font-black /* 900 */
This is light text
This is semi-bold text
This is black text
Conclusion
Tailwind’s typography utilities let you apply font sizes, families, and weights quickly. Combine these classes to create headings, body text, and labels that match your brand.