Více tříd najednou

Každá utility třída dělá jen jednu věc. Když tedy chcete, aby prvek vypadal určitým způsobem, dáte mu tříd několik. Jak na to, víte z kurzu CSS: napíšete je všechny do jednoho atributu class a oddělíte je mezerami:

<h1 class="text-center font-bold uppercase">Kočičí útulek Fousek</h1>

Každá z těchto tříd přidá jednu deklaraci:

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

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

.uppercase {
	text-transform: uppercase;
}

Dohromady z nich vznikne nadpis jako tento: Kočičí útulek Fousek. (Z kurzu CSS víte, že tloušťka 700 je totéž co bold, tedy tučné písmo, a že uppercase převede všechna písmena na velká.)

Na pořadí tříd nezáleží: class="uppercase font-bold text-center" udělá úplně totéž. Je zvykem přidávat nové třídy na konec.

A jednu třídu můžete dát libovolnému počtu prvků. Kde byste v kurzu CSS psali nové pravidlo nebo přidávali prvek do selektoru pravidla, tady prostě dáte prvku stejnou třídu.

Dejte si pozor na dvě časté chyby:

• Neoddělujte třídy čárkami: čárka by se stala součástí názvu třídy (text-center,) a takovou třídu Tailwind nemá.
• Nepište druhý atribut class. V <h1 class="text-center" class="font-bold"> prohlížeč použije jen ten první a druhý ignoruje.

(Proč nadpis nebyl tučný už předtím, když prohlížeče zobrazují nadpisy tučně? To zjistíte v dalším cvičení.)