Typography
Tailwind CSS empowers us with a comprehensive suite of features for styling typography, encompassing font family, size, weight, letter spacing, line height, text alignment, decoration, and much more. Its versatile utility classes cover nearly every typographic need. However, when custom typography or tailored classes like "Label" or "Body" are required, crafting custom components with the desired properties is the recommended approach.
These are the recommended classes for Typography, which have been used over the building process of Design System.
Class
Properties
text-xs
font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm
font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base
font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
For further exploration, consider these resources: