Flexbox

Jetzt legen wir die Navigation aus. Im CSS-Kurs hast du Flexbox mit der Deklaration display: flex am Elternelement der Elemente eingeschaltet, die nebeneinander stehen sollen. In Tailwind ist das die Klasse flex:

.flex {
	display: flex;
}

Das Element mit der Klasse flex wird zum Flex-Container, und seine Kinder werden zu Flex-Items: Sie reihen sich von links nach rechts in einer Zeile auf.

Die Abstände zwischen den Items legen die Klassen gap-* fest (die Eigenschaft gap). Sie nutzen die Abstandsskala, die du von Padding und Margins kennst: gap-2 sind 0.5rem (8 px), gap-4 sind 1rem (16 px), gap-6 sind 1.5rem (24 px). gap-x-* legt nur die Abstände zwischen den Spalten fest (column-gap) und gap-y-* nur die zwischen den Zeilen (row-gap).

Warum gibst du nicht jedem Link einen Margin, zum Beispiel mr-4? Du müsstest ihn an jeden Link schreiben, und der letzte bekäme auch noch einen Abstand dahinter. gap schreibst du einmal am Container, und die Abstände entstehen nur zwischen den Items.

Die Links der Navigation stehen in einer Liste (ul), jeder in einem eigenen li. Listeneinträge sind Block-Elemente, die Links stehen also untereinander. (Die Aufzählungspunkte hat Preflight entfernt, die Basisstile von Tailwind.)