Eigene Farben

In dieser Lektion machst du Tailwind zu deinem eigenen. Du fügst ihm eigene Farben und Schriftarten hinzu und lernst, was du tust, wenn du immer wieder dieselbe Liste von Klassen schreibst.

Wir arbeiten an der Startseite des Tierheims: einer Kopfzeile, dem Hero (dem Willkommensbereich ganz oben mit der Schlagzeile und einem Button) und den Karten der Katzen. Sie ist mit Klassen gestaltet, die du aus den früheren Lektionen kennst. Um die Karten nebeneinander zu sehen, stelle die Vorschau auf 1280 px.

Die Hauptfarbe des Tierheims ist Orange, und du findest sie überall auf der Seite: bg-orange-500 und hover:bg-orange-600 an fünf Buttons, text-orange-600 an der Schlagzeile. (Auch der Hintergrund des Heros und der Link Spenden sind orange, aber dort sind die Farben als beliebige Werte in eckigen Klammern geschrieben. Dazu kommen wir später in dieser Lektion.) Stell dir nun vor, das Tierheim bekommt ein neues Logo in einem anderen Orange oder in Grün. Du müsstest jede dieser Klassen finden und ändern, und es wäre leicht, eine zu übersehen. Besser ist es, der Farbe einen Namen zu geben, zum Beispiel marke (die Markenfarbe ist die Farbe, an der man ein Unternehmen oder eine Organisation erkennt), und an einer einzigen Stelle festzulegen, welche Farbe das ist.

Die Farben von Tailwind sind nicht fest vorgegeben. Sie stammen aus seinem Theme: der Liste von Werten, aus denen Tailwind Klassen macht (Farben, Schriftarten, die Abstandsstufe, Breakpoints und mehr). Jeder Wert im Theme ist eine CSS-Variable: ein Name, der mit zwei Strichen beginnt, mit einem Wert, den CSS dann an anderer Stelle verwenden kann. So definiert das Theme zum Beispiel orange-500:

--color-orange-500: oklch(70.5% 0.213 47.604);

(oklch kennst du aus der Lektion Farben und Text.) Tailwind liest den Namen der Variable: --color- sagt, dass es eine Farbe ist, und der Rest, orange-500, wird zum Ende der Klassen bg-orange-500, text-orange-500, border-orange-500 und aller anderen Klassen, die eine Farbe nehmen.

Deine eigenen Werte fügst du dem Theme in style.css hinzu, in einem @theme-Block nach @import "tailwindcss";:

@import "tailwindcss";

@theme {
	--color-marke-500: #f97316;
	--color-marke-600: #ea580c;
}

Du kannst die Farben in jedem Format schreiben, das du kennst: Hex, rgb oder hsl. Jetzt hat Tailwind zwei neue Farben, marke-500 und marke-600, und alle Farbklassen funktionieren mit ihnen: bg-marke-500, text-marke-600, border-marke-500, hover:bg-marke-600, sogar mit einer Deckkraft, wie in bg-marke-500/50. Die Klasse bg-marke-500 erzeugt dieses CSS:

.bg-marke-500 {
	background-color: var(--color-marke-500);
}

var(--color-marke-500) steht für den Wert der Variable. Wenn du also den Wert in @theme änderst, ändern sich alle Klassen mit marke-500 mit, auf der ganzen Seite.

Der Name marke und die Zahlen sind deine Wahl. Wir nehmen 500 und 600 wie in der Palette von Tailwind: Man sieht sofort, welcher Farbton dunkler ist, und es gibt später Platz für hellere und dunklere Töne.