Flexbox

Now let's lay out the navigation. In the CSS course, you switched flexbox on with the declaration display: flex on the parent of the elements that should stand side by side. In Tailwind, it's the class flex:

.flex {
	display: flex;
}

The element with the class flex becomes a flex container, and its children become flex items: they line up in a row, from left to right.

The gaps between the items are set by the classes gap-* (the property gap). They use the spacing scale that you know from padding and margins: gap-2 is 0.5rem (8 px), gap-4 is 1rem (16 px), gap-6 is 1.5rem (24 px). gap-x-* sets only the gaps between columns (column-gap), and gap-y-* only the gaps between rows (row-gap).

Why not give every link a margin, say mr-4? You'd have to write it on every link, and the last one would get a space after it too. gap is written once, on the container, and the gaps are only between the items.

The navigation links are in a list (ul), each in its own li. List items are block elements, so the links are one below another. (The bullets were removed by Preflight, Tailwind's base styles.)