Zusammenfassung

In dieser Lektion hast du gelernt:

• Die Farben, Schriftarten und anderen Werte von Tailwind kommen aus seinem Theme. Jeder Wert ist eine CSS-Variable, wie --color-orange-500. Deine eigenen fügst du in einem @theme-Block nach @import "tailwindcss"; hinzu.
• Eine Variable, deren Name mit --color- beginnt, macht eine Farbe für alle Farbklassen: --color-marke-500 ergibt bg-marke-500, text-marke-500, border-marke-500, hover:bg-marke-500 und andere. Wenn du ihren Wert änderst, ändert sich die Farbe überall, wo sie verwendet wird.
• Eine Variable, deren Name mit --font- beginnt, macht eine Schriftklasse: --font-titel: "Baloo 2", sans-serif; ergibt font-titel. Deine eigene --font-sans ändert die Schrift der ganzen Seite.
• Eine Webschrift kannst du im Stylesheet mit @import url(...) laden. Er muss ganz vorn stehen, vor @import "tailwindcss";: Der Browser überspringt einen @import nach anderen Regeln ohne Fehlermeldung.
• Wenn sich eine Liste von Klassen wiederholt, schreibe das Element nur einmal, in einer Vorlage oder einer Komponente, oder ändere alle Stellen auf einmal (Strg+D). Sonst mach deine eigene Klasse: eine Regel mit @apply in @layer components.
• Utility-Klassen gewinnen gegen die Ebene components, du kannst deine eigene Klasse also mit ihnen anpassen: knopf px-8.
• Eine unbekannte Klasse in @apply stoppt die ganze style.css, und unter der Vorschau erscheint ein roter Fehler.
• @utility macht eine echte Utility-Klasse, die mit Varianten funktioniert, wie md:bg-streifen. Eine Klasse aus @layer components tut das nicht.
• Beliebige Werte sind für Einzelfälle. Ein Wert, der sich wiederholt, gehört ins Theme.

In der nächsten Lektion, dem Abschlussprojekt, gestaltest du die ganze Startseite des Tierheims allein, mit allem, was du in diesem Kurs gelernt hast.

Zum Üben. Oskar ist neu im Tierheim. Wir haben seiner Karte das Label Neu hinzugefügt (ein span am Anfang der Karte), und die Karte hat jetzt die Klasse relative, damit das Label auf dem Bild platziert werden kann. Mach für das Label eine eigene Klasse, in einer zweiten Farbe des Tierheims: einem Grün für Labels.