May 2022
Intermediate to advanced
104 pages
2h 24m
English
Perhaps the first thing you notice about text on a web page is its size and styling. Tailwind provides a series of utilities for each.
The effective default for text size is the text-base class, which defines the CSS properties font-size: 1rem and line-height: 1.5rem, meaning the font size for text-base is the same as the font size for the root element of your page, and the line height is 1.5 times that size. Tailwind provides a family of utilities, text-{size}, which includes two smaller steps, ten larger ones, and the base class, giving us thirteen sizes overall. Each step defines a font size and a line height, as listed in the table.
| Class | Font Size | Line Height |
|---|---|---|
text-xs | 0.75rem | 1rem |
text-sm | 0.875rem | 1.25rem |
text-base | 1rem | 1.5rem |
text-lg |
Read now
Unlock full access