Reading Class Names

You now know a few Tailwind classes. Have a look at them next to the CSS they make:

The names aren't random. A class name says what it does, and mostly, it's made of CSS you know:

• Some class names are just the CSS value, because it's clear which property it belongs to: uppercase can only be text-transform. In the same way, italic is font-style: italic, and underline is text-decoration-line: underline.
• Other classes start with a short word for the property, followed by the value: text-center (text alignment), font-bold (font weight), list-disc (the type of the list's bullets).

The short word isn't always the property's name, though. Classes that start with text- set the alignment of text and its size (text-3xl), and in the next lesson, you'll use text- for the color of text too. So when you're not sure, look the class up. Tailwind's documentation at tailwindcss.com/docs has a page for each CSS property, with a table of its classes and the CSS each of them makes. The quickest way to find a page is the search at the top: type in a CSS property you know, for example font-style. The documentation describes Tailwind 4, the version this course uses. Some tutorials on the internet are still about the older Tailwind 3, where a few classes have different names.

The new class underline deserves a few words. Lines under or through text are set by the CSS property text-decoration-line: the value underline draws a line under the text, line-through through it, and none removes the line. Browsers underline links, but Preflight removed the underline, together with their blue color (color: inherit and text-decoration: inherit), so our link looks like ordinary text. That's a problem: visitors can't tell that they can click it. An underline is the clearest sign of a link.