Rahmen

In dieser Lektion verwandeln wir eine schlichte weiße Box in eine moderne Karte: mit Rahmen, abgerundeten Ecken, einem Schatten und einem Bild, das gut hineinpasst. Wir arbeiten an der Adoptionskarte von Oskar, einem jungen schwarzen Kater. Die Karte hat schon die Klassen, die du aus den vorigen Lektionen kennst: Farben, Textgrößen, Padding und Margins, eine maximale Breite und die Klasse mx-auto, die die Karte zentriert.

Im CSS-Kurs hast du einen Rahmen mit drei Werten geschrieben: border: 1px solid gray, also Breite, Stil und Farbe. In Tailwind hat jedes davon eigene Klassen, und meistens brauchst du nur eine: border.

Achtung: Die Zahl ist hier die Breite in Pixeln, keine Stufe der Abstandsskala. border-2 sind 2 Pixel, p-2 dagegen 8.

Warum reicht eine Breite? Im CSS-Kurs wurde ein Rahmen ohne Stil gar nicht angezeigt. Aber Preflight, die Basisstile von Tailwind, gibt jedem Element vorab border: 0 solid: eine durchgezogene Linie, die 0 Pixel breit ist. Sobald eine Klasse ihr eine Breite gibt, erscheint die Linie. Für andere Stile gibt es die Klassen border-dashed, border-dotted und border-double.

Und die Farbe? Preflight legt keine fest, deshalb bekommt ein Rahmen die Standardfarbe currentColor: die Textfarbe des Elements. Das ist praktisch für einen Button, dessen Rahmen zum Text passen soll, aber eine Karte mit dunklem Text bekommt einen dunklen Rahmen. Eine andere Farbe kommt aus der Palette, die du kennst: border-stone-200 setzt border-color auf ein helles Stone-Grau, genauso wie bg-stone-200 den Hintergrund setzt.