Abstände für jede Breite

Das Layout der Seite funktioniert jetzt in jeder Breite, sehen wir uns also die Details an. Der Bildschirm eines Smartphones ist klein, und Abstände, die auf einem Computer luftig wirken, nehmen auf einem Smartphone nur Platz weg. Der Hero hat py-24, also 96 px über und unter seinem Inhalt, auf einem Smartphone ist darum viel leerer Raum um einen kurzen Text.

Ein Präfix funktioniert mit jeder Tailwind-Klasse, nicht nur beim Layout: auch bei Abständen, Größen, Farben und Schriften. Das Vorgehen ist dasselbe wie bei der Überschrift: kleinere Abstände ohne Präfix und größere mit dem Präfix md:. Zum Beispiel:

<section class="px-4 py-12 md:px-8 md:py-24">

Auf einem Smartphone hat dieser Abschnitt 16 px Padding an den Seiten und 48 px oben und unten, ab 768 px sind es 32 px und 96 px. Jede Klasse mit Präfix ändert nur ihre eigene Eigenschaft: md:py-24 ändert das Padding oben und unten und überlässt die Seiten px-4 und md:px-8.

Die Textgröße ändert sich genauso, wie du es bei der Überschrift gesehen hast: text-4xl md:text-6xl.