Несколько классов сразу

Каждый утилитный класс делает только одно дело. Поэтому, чтобы элемент выглядел нужным образом, ему даётся сразу несколько классов. Как это делается, вы знаете из курса CSS: запишите их все в один атрибут class через пробел:

<h1 class="text-center font-bold uppercase">Кошачий приют «Усики»</h1>

Каждый из этих классов добавляет одно объявление:

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

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

.uppercase {
	text-transform: uppercase;
}

Вместе они делают заголовок таким: Кошачий приют «Усики». (Помните из курса CSS, что вес 700 — то же самое, что bold, а uppercase превращает все буквы в заглавные.)

Порядок классов не важен: class="uppercase font-bold text-center" делает ровно то же самое. Обычно новые классы добавляют в конец.

И один класс можно дать любому числу элементов. Там, где в курсе CSS вы написали бы новое правило или добавили элемент в селектор правила, здесь вы просто даёте элементу тот же класс.

Остерегайтесь двух типичных ошибок:

• Не разделяйте классы запятыми: запятая станет частью имени класса (text-center,), а такого класса в Tailwind нет.
• Не пишите второй атрибут class. В <h1 class="text-center" class="font-bold"> браузер использует только первый, а второй игнорирует.

(Почему же заголовок до сих пор не был жирным, хотя браузеры показывают заголовки жирным шрифтом? Вы узнаете об этом в следующем упражнении.)