Max Width and Centering

A fixed width is a problem on narrow screens: a card 384 pixels wide doesn't fit on a phone. What we want is a card as wide as there's room for, but never wider than 384 pixels. That's the max-width property, which you used in the final project of the CSS course. In Tailwind, it's set by the max-w-* classes, with named sizes:

You know the size names from the font sizes: xs is extra small, sm small, lg large and xl extra large. The only new one is md, medium, the size between sm and lg. Bigger ones go on up to max-w-7xl. max-w-prose is meant for text: the unit ch is the width of the digit 0 in the element's font, so the lines are about 65 characters long, which is comfortable to read.

On wide screens, the card then needs to be in the middle. In the CSS course, you wrote margin: 0 auto. In Tailwind, it's mx-auto:

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

(Tailwind writes it as margin-inline: auto, which means the same in a language written from left to right.) The browser splits the free space next to the element equally between its left and right margins. That's why it only works for an element that's narrower than its parent: one with a width or a maximum width. And don't confuse it with text-center: that centers the text inside a box, while mx-auto centers the box itself.