Size and Shape
Explore how to use Tailwind CSS utilities to control text size, font weight, italicization, underline, and text case. Learn to apply these styles for headers and body text to create well-structured and visually appealing typography in web projects.
We'll cover the following...
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 ...