Rahmen auf einer Seite
In CSS hast du mit border-top, border-bottom und ähnlichen Eigenschaften eine Linie nur auf einer Seite gezeichnet. In Tailwind hängst du den Buchstaben der Seite hinter border- und danach die Breite, falls die Linie nicht 1 Pixel breit sein soll:
| Klasse | CSS |
|---|---|
border-t | border-top-width: 1px; |
border-r | border-right-width: 1px; |
border-b-2 | border-bottom-width: 2px; |
border-l-4 | border-left-width: 4px; |
border-x | border-left-width: 1px;border-right-width: 1px; |
border-y | border-top-width: 1px;border-bottom-width: 1px; |
Die Seitenbuchstaben kennst du vom Padding (pt-4, px-6): t ist oben, r rechts, b unten, l links, x links und rechts und y oben und unten.
Die Farbklasse braucht keine Seite: border-orange-300 färbt alle vier Seiten, und sichtbar sind nur die, die eine Breite haben. (Sollen zwei Seiten verschiedene Farben haben, gibt es Klassen wie border-t-orange-500.)
Eine Linie auf einer Seite trennt oft Dinge: border-b unter einer Überschrift, border-t über den Buttons am unteren Rand einer Karte. Eine dickere farbige Linie links kennzeichnet ein Zitat oder einen wichtigen Hinweis. Geben wir Oskars Beschreibung diesen Look.
So schreibst du es:
Anweisungen
- 1
Füge dem Absatz mit Oskars Beschreibung („Ein mutiger Entdecker...“) die Klasse
border-l-4hinzu. An seinem linken Rand erscheint eine 4 Pixel breite Linie, und sie ist wieder dunkel: Sie hat die Textfarbe des Absatzes. - 2
Füge die Klasse
border-orange-300hinzu, die die Linie orange färbt, undpl-3, damit der Text die Linie nicht berührt.