Font Size

In the previous lesson, you made a heading bigger with text-3xl. It's one step of Tailwind's scale of font sizes:

xs, sm, lg and xl are like clothing sizes: extra small, small, large, extra large. text-base is the base size, 16 pixels. From xl up, each extra x means a bigger size: 2xl, 3xl and so on. There are even bigger sizes, up to text-9xl (8rem, 128 px).

The sizes are in rem, so they respect the font size the visitor has set in the browser, as you know from the CSS course. And each size class also sets a line height that suits the size: the sizes for ordinary text get roomy lines, about one and a half times the font size, so that they're easy to read; big headings get tighter ones (from text-5xl up, a line is exactly as high as the font size), so that a heading on two lines holds together.

You may have noticed that the size classes start with text-, just like the color classes (text-orange-600) and text-center. Tailwind tells them apart by what follows: a size, a color or an alignment.

To change the size of the heading, replace text-3xl with another size, don't add a second one. As you know from the CSS course, when two rules with the same specificity set the same property, the one that comes later in the stylesheet wins. All Tailwind classes have the same specificity (one class), so when an element has two sizes, the order of their rules in Tailwind's CSS decides, not their order in the class attribute. For example, class="text-4xl text-3xl" gives the heading the size text-4xl, even though text-3xl comes last. So that you don't have to guess, give each element only one class for each property.