Welchen Weg du wählst

Du kennst jetzt mehrere Wege, ein Element mit Tailwind zu gestalten. Hier steht, wann du welchen nimmst:

Was du brauchst	Was du nimmst	Beispiel
Ein Element gestalten (meistens)	Utility-Klassen im HTML	`p-4 text-center`
Ein Wert, den du nur einmal brauchst und der nicht im Theme steht	ein beliebiger Wert	`w-[350px]`
Die Farben, Schriftarten und anderen Werte deines Designs, die du an vielen Stellen verwendest	das Theme: `@theme`	`--color-marke-500`
Dieselbe Liste von Klassen an vielen Elementen	eine Vorlage oder eine Komponente, wenn du welche hast, oder alle Stellen auf einmal ändern; sonst eine Klasse mit `@apply` in `@layer components`	`.knopf`
CSS, für das Tailwind keine Klasse hat, auch mit Varianten	`@utility`	`bg-streifen`

Dazu noch zwei Ratschläge:

Mach nicht für alles eine Klasse. Wenn jedes Element seine eigene Klasse mit @apply bekäme, würdest du wieder Regeln schreiben wie im CSS-Kurs, nur auf andere Weise. Du würdest verlieren, was Tailwind so praktisch macht: Du siehst das Aussehen im HTML und musst dir keine Namen ausdenken. Heb dir @apply für kleine Teile auf, die sich oft wiederholen: Buttons, Abzeichen, Formularfelder.
Ein beliebiger Wert, den du zweimal verwendest, gehört ins Theme. Eckige Klammern sind in Ordnung für einen Einzelfall, etwa die genaue Breite eines Logos. Aber wenn derselbe Wert wieder auftaucht, ist er Teil deines Designs: Gib ihm in @theme einen Namen.

Auf unserer Seite stehen zwei beliebige Werte, die ins Theme gehören. Als die Seite gemacht wurde, hat jemand zwei Farben aus dem Design des Tierheims als beliebige Werte kopiert: den Hintergrund des Heros bg-[#ffedd5] und den Link Spenden text-[#ea580c]. Sieh genau hin: #ea580c ist unser marke-600. Und #ffedd5 ist ein heller Ton desselben Orange, gehört also auch zu den Markenfarben, als marke-100.

Anweisungen

Füge in @theme die Farbe --color-marke-100: #ffedd5; hinzu.
Ersetze am Hero-section bg-[#ffedd5] durch bg-marke-100.
Ersetze am Link Spenden in der Kopfzeile text-[#ea580c] durch text-marke-600.

ZurückWeiter

Welchen Weg du wählst

Du kennst jetzt mehrere Wege, ein Element mit Tailwind zu gestalten. Hier steht, wann du welchen nimmst:

Was du brauchst	Was du nimmst	Beispiel
Ein Element gestalten (meistens)	Utility-Klassen im HTML	`p-4 text-center`
Ein Wert, den du nur einmal brauchst und der nicht im Theme steht	ein beliebiger Wert	`w-[350px]`
Die Farben, Schriftarten und anderen Werte deines Designs, die du an vielen Stellen verwendest	das Theme: `@theme`	`--color-marke-500`
Dieselbe Liste von Klassen an vielen Elementen	eine Vorlage oder eine Komponente, wenn du welche hast, oder alle Stellen auf einmal ändern; sonst eine Klasse mit `@apply` in `@layer components`	`.knopf`
CSS, für das Tailwind keine Klasse hat, auch mit Varianten	`@utility`	`bg-streifen`

Dazu noch zwei Ratschläge:

Mach nicht für alles eine Klasse. Wenn jedes Element seine eigene Klasse mit @apply bekäme, würdest du wieder Regeln schreiben wie im CSS-Kurs, nur auf andere Weise. Du würdest verlieren, was Tailwind so praktisch macht: Du siehst das Aussehen im HTML und musst dir keine Namen ausdenken. Heb dir @apply für kleine Teile auf, die sich oft wiederholen: Buttons, Abzeichen, Formularfelder.
Ein beliebiger Wert, den du zweimal verwendest, gehört ins Theme. Eckige Klammern sind in Ordnung für einen Einzelfall, etwa die genaue Breite eines Logos. Aber wenn derselbe Wert wieder auftaucht, ist er Teil deines Designs: Gib ihm in @theme einen Namen.