Maximale Breite und Zentrieren

Eine feste Breite ist auf schmalen Bildschirmen ein Problem: Eine Karte mit 384 Pixeln Breite passt nicht auf ein Smartphone. Wir wollen eine Karte, die so breit ist, wie Platz da ist, aber nie breiter als 384 Pixel. Das ist die Eigenschaft max-width, die du im Abschlussprojekt des CSS-Kurses verwendet hast. In Tailwind setzen sie die Klassen max-w-* mit benannten Größen:

Die Größennamen kennst du von den Schriftgrößen: xs ist extra klein, sm klein, lg groß und xl extra groß. Neu ist nur md, medium, die Größe zwischen sm und lg. Größere gehen weiter bis max-w-7xl. max-w-prose ist für Text gedacht: Die Einheit ch ist die Breite der Ziffer 0 in der Schrift des Elements, die Zeilen sind also etwa 65 Zeichen lang, was sich angenehm liest.

Auf breiten Bildschirmen muss die Karte dann in der Mitte stehen. Im CSS-Kurs hast du margin: 0 auto geschrieben. In Tailwind ist es mx-auto:

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

(Tailwind schreibt es als margin-inline: auto, was in einer Sprache, die von links nach rechts geschrieben wird, dasselbe bedeutet.) Der Browser teilt den freien Platz neben dem Element gleichmäßig auf den linken und den rechten Margin auf. Darum funktioniert es nur bei einem Element, das schmaler ist als sein Elternelement: eines mit einer Breite oder einer maximalen Breite. Und verwechsle es nicht mit text-center: Das zentriert den Text in einem Kasten, während mx-auto den Kasten selbst zentriert.