Eigene Klasse mit @apply

Tailwind kann eine ganze Liste seiner Klassen unter einen Namen deiner Wahl stellen. In style.css schreibst du wie im CSS-Kurs eine Regel für deine eigene Klasse, und darin @apply, gefolgt von den Klassen von Tailwind:

@layer components {
	.knopf {
		@apply inline-block rounded-full bg-marke-500 px-5 py-2 font-semibold text-white transition-colors hover:bg-marke-600;
	}
}

@apply nimmt das CSS der aufgelisteten Klassen und setzt es in deine Regel ein: .knopf bekommt display: inline-block, die runden Ecken, den Hintergrund, das Padding und alles andere. Auch Varianten funktionieren: Aus hover:bg-marke-600 macht Tailwind eine Regel für .knopf:hover. Der Name knopf ist unsere Wahl. Auf vielen Websites siehst du stattdessen btn (kurz für „button“).

Dann genügt im HTML eine einzige Klasse:

<a href="#" class="knopf mt-4">Tiger adoptieren</a>

Das mt-4 haben wir aus .knopf herausgelassen: Der Abstand über einem Button hängt davon ab, wo der Button steht, nicht davon, wie ein Button aussieht. Du kannst deine Klasse mit beliebigen Utility-Klassen kombinieren.

Warum @layer components? Tailwind sortiert sein CSS in Ebenen (in CSS heißen sie Cascade Layers): zuerst base (Preflight), dann components und zuletzt utilities, die Utility-Klassen. Wenn Regeln in verschiedenen Ebenen dieselbe Eigenschaft setzen, gewinnt die Regel in der späteren Ebene, egal wie spezifisch sie ist oder wo im Stylesheet sie steht. Wir haben .knopf in die Ebene components gesetzt, deshalb gewinnen Utility-Klassen immer gegen ihn. Darum kann der Button im Hero ein knopf sein und trotzdem größer:

<a href="#katzen" class="knopf mt-8 px-8 py-3 text-lg">Katzen kennenlernen</a>

px-8 und py-3 gewinnen gegen px-5 und py-2 aus .knopf. Ohne @layer components läge die Regel für .knopf in keiner Ebene, und CSS außerhalb von Ebenen gewinnt gegen alle Ebenen: px-8 würde nichts bewirken.

Fehler in @apply. Wie du weißt, bewirkt eine falsch geschriebene Klasse im HTML einfach nichts. In @apply ist das anders: Tailwind kann deine Regel nicht erzeugen, deshalb bekommt die Seite gar kein CSS aus style.css, und unter der Vorschau erscheint ein roter Fehler, zum Beispiel:

style.css: Cannot apply unknown utility class `bg-markee-500`

Er sagt dir, welche Klasse Tailwind nicht kennt. Behebe den Fehler und führe den Code erneut aus.