Mehrere Klassen auf einmal

Jede Utility-Klasse tut nur eine Sache. Wenn ein Element also auf eine bestimmte Weise aussehen soll, gibst du ihm mehrere Klassen. Wie das geht, kennst du aus dem CSS-Kurs: Schreibe sie alle in ein Attribut class, getrennt durch Leerzeichen:

<h1 class="text-center font-bold uppercase">Katzenheim Samtpfote</h1>

Jede dieser Klassen fügt eine Deklaration hinzu:

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

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

.uppercase {
	text-transform: uppercase;
}

Zusammen ergeben sie eine Überschrift wie diese: Katzenheim Samtpfote. (Erinnere dich aus dem CSS-Kurs: Die Stärke 700 entspricht bold, und uppercase macht aus allen Buchstaben Großbuchstaben.)

Die Reihenfolge der Klassen spielt keine Rolle: class="uppercase font-bold text-center" bewirkt genau dasselbe. Üblich ist es, neue Klassen am Ende hinzuzufügen.

Und eine Klasse kann an beliebig vielen Elementen stehen. Wo du im CSS-Kurs eine neue Regel geschrieben oder das Element zum Selektor einer Regel hinzugefügt hättest, gibst du dem Element hier einfach dieselbe Klasse.

Hüte dich vor zwei typischen Fehlern:

• Trenne die Klassen nicht mit Kommas: Ein Komma würde Teil des Klassennamens (text-center,), und eine solche Klasse hat Tailwind nicht.
• Schreibe kein zweites Attribut class. Bei <h1 class="text-center" class="font-bold"> verwendet der Browser nur das erste und ignoriert das andere.

(Warum war die Überschrift nicht schon fett, obwohl Browser Überschriften fett darstellen? Das erfährst du in der nächsten Übung.)