Several Classes at Once

Each utility class does just one thing. So when you want an element to look a certain way, you give it several classes. You know how from the CSS course: write them all into one class attribute, separated by spaces:

<h1 class="text-center font-bold uppercase">Whiskers Cat Shelter</h1>

Each of these classes adds one declaration:

.text-center {
	text-align: center;
}

.font-bold {
	font-weight: 700;
}

.uppercase {
	text-transform: uppercase;
}

Together, they make a heading like this: Whiskers Cat Shelter. (Remember from the CSS course that the weight 700 is the same as bold, and that uppercase turns all letters into capitals.)

The order of the classes doesn't matter: class="uppercase font-bold text-center" does exactly the same. It's common to add new classes at the end.

And one class can go on as many elements as you like. Where in the CSS course you would write a new rule, or add the element to a rule's selector, here you just give the element the same class.

Watch out for two typical mistakes:

• Don't separate the classes with commas: a comma would become part of the class name (text-center,), and Tailwind has no class like that.
• Don't write a second class attribute. In <h1 class="text-center" class="font-bold">, the browser uses only the first one and ignores the other.

(Why wasn't the heading bold already, even though browsers show headings in bold? You'll find out in the next exercise.)