Size and Shape

We use our web application to display text to a reader. The design of a website is mostly concerned with the placement, size, weight, and layout of text. In this lesson, we’ll look at how Tailwind lets us control the display of text.

Text size

Perhaps the first thing we 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. This means the font size for .text-base is the same as the font size for the root element of our page, and the line height is 1.5 times that size. Tailwind provides a family of utilities, .text-{size}, which includes 13 sizes overall, as shown below in the table. Each step defines a font size and a line-height.

This is our first encounter with one of Tailwind’s explicit design goals, which is to provide a consistent set of steps for a potentially infinite set of values. With the .text-{size} family of utilities, Tailwind makes it easy to keep sizing and spacing consistent throughout the site.

In the playground below, we’ll try the text sizes as follows:

• text-xs
• text-lg
• text-sm