Display

In dieser Lektion legst du den oberen Teil der Startseite des Tierheims aus: eine Kopfzeile mit der Navigation, einen großen Begrüßungsbereich ganz oben (Webdesigner nennen ihn Hero) und die Karten unserer vier Katzen. Das CSS dafür kennst du aus dem CSS-Kurs: display, Flexbox, Grid und position. Jetzt lernst du die Tailwind-Klassen, die es für dich schreiben.

Die Seite im Editor hat schon die Klassen aus den vorigen Lektionen: Farben, Text, Abstände, abgerundete Ecken und Schatten. Ihr Layout ist aber noch der schlichte normale Fluss, bei dem alles untereinander steht. Die Links in der Navigation stehen übereinander, und die Karten sind so breit wie die Seite (scrolle in der Vorschau nach unten, um sie zu sehen).

Fangen wir mit der Eigenschaft display an. In Tailwind hat jeder ihrer Werte eine eigene Klasse, die nach dem Wert benannt ist:

Nur hidden ist nicht nach seinem Wert benannt. Es versteckt das Element: Es wird nicht angezeigt und braucht keinen Platz, bleibt aber im HTML. Verwechsle es nicht mit invisible (visibility: hidden) oder opacity-0: Damit siehst du das Element ebenfalls nicht, aber an seiner Stelle bleibt eine Lücke. (Die Klassen für display: flex und display: grid kommen in den nächsten Übungen.)

Aus dem CSS-Kurs weißt du noch: Ein Inline-Element, etwa ein Link, steht in einer Textzeile wie ein Wort. Sein Padding oben und unten schiebt andere Elemente nicht weg, und sein Margin oben und unten wirkt gar nicht. Sieh dir den Link „Katzen kennenlernen“ im Hero an: Sein oranger Hintergrund ragt in den Text darüber, und seine Klasse mt-4 bewirkt nichts. (Der Button „Spenden“ in der Navigation hat dasselbe Problem; um den kümmert sich bald Flexbox.)