Wiederholte Klassen

Sieh dir die vier Buttons Adoptieren in den Karten der Katzen an. Jeder von ihnen hat eine Liste von neun Klassen, und die Listen sollten gleich sein:

<a href="#" class="mt-4 inline-block rounded-full bg-marke-500 px-5 py-2 font-semibold text-white hover:bg-marke-600">Tiger adoptieren</a>

So funktioniert Tailwind: Jedes Element sagt direkt im HTML, wie es aussieht. Meistens ist das ein Vorteil. Du siehst, wie ein Element aussieht, genau dort, wo das Element steht, und wenn du ein Element änderst, kannst du ein anderes nicht aus Versehen kaputt machen. Wenn sich aber ein Element wiederholt, wiederholt sich seine Liste von Klassen mit. Wenn das Tierheim andere Buttons will, musst du alle vier Listen auf dieselbe Weise ändern. Und wenn du eine übersiehst, sieht dieser Button anders aus als die anderen. Auf unserer Seite ist das schon passiert: Jemand hat die Ecken der Buttons von rounded-lg zu rounded-full geändert und einen Button vergessen. Sieh dir die Vorschau genau an.

Was kannst du dagegen tun?

• Das Element nur einmal schreiben. Echte Websites werden selten von Hand geschrieben, Karte für Karte. Die Liste der Katzen käme aus einer Datenbank, und die Karte würde nur einmal geschrieben, in einer Vorlage oder einer Komponente (einem wiederverwendbaren Stück einer Seite, wie in JavaScript-Frameworks wie React). Der Code würde sie dann für jede Katze wiederholen. So stehen auch ihre Klassen an einer einzigen Stelle. Diese Lösung empfehlen die Autoren von Tailwind zuerst.
• Alle Stellen auf einmal ändern. Wenn die wiederholten Elemente nah beieinander stehen, wie unsere vier Buttons, kannst du einfach alle ändern. Code-Editoren helfen dabei, und dieser hier auch: Markiere ein Stück Text und drücke Strg+D (auf dem Mac Cmd+D), und die nächste Stelle mit demselben Text wird mitmarkiert. Jeder Druck fügt die nächste hinzu. Was du dann tippst, landet an allen markierten Stellen gleichzeitig.
• Der Liste von Klassen einen Namen geben. Wenn beides nicht hilft, lässt dich Tailwind aus einer Liste seiner Klassen eine eigene Klasse machen. Wie das geht, lernst du in der nächsten Übung.