Storefronts müssen auf Mobilgeräten genauso gut funktionieren wie auf großen Desktop-Bildschirmen. Tailwind löst Responsive Design über Breakpoint-Präfixe direkt an den Utility-Klassen - ganz ohne separate Media-Query-Blöcke im CSS.

Mobile-first als Grundprinzip

Tailwind ist standardmäßig mobile-first: eine Klasse ohne Präfix (grid-cols-1) gilt für alle Bildschirmgrößen, ein Präfix wie md: überschreibt sie erst ab dieser Breite. Man schreibt also zuerst das mobile Layout, und fügt dann Präfixe hinzu, um es für größere Bildschirme zu verändern - nicht umgekehrt.

<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
    <!-- eine Spalte auf Mobilgeräten, zwei ab Tablet, drei ab Desktop -->
</div>

Die Standard-Breakpoints

• sm: - ab 640px (größere Handys im Querformat)
• md: - ab 768px (Tablets)
• lg: - ab 1024px (kleine Desktops/Laptops)
• xl: - ab 1280px (Desktop)
• 2xl: - ab 1536px (große Bildschirme)

Eigene Breakpoints - etwa ein zusätzlicher 3xl: für sehr breite Displays - werden wie in Kapitel 11 gezeigt über --breakpoint-*-Variablen in @theme definiert.

Typische responsive Muster

Ein paar Muster, die in praktisch jedem Hyvä-Template wiederkehren:

<!-- Navigation: Mobile-Menü sichtbar, Desktop-Menü versteckt (Alpine steuert das Umschalten) -->
<nav class="block lg:hidden">...</nav>
<nav class="hidden lg:block">...</nav>

<!-- Abstand, der auf größeren Screens großzügiger wird -->
<section class="px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20">...</section>

<!-- Schriftgröße, die mit dem Bildschirm mitwächst -->
<h1 class="text-2xl md:text-3xl lg:text-4xl">...</h1>

hidden/block in Kombination mit einem Breakpoint-Präfix ist das Standardmuster, um zwischen einer Mobil- und einer Desktop-Variante desselben UI-Elements umzuschalten - ganz ohne JavaScript, rein über CSS.

Vorausschau: das Grid für die Team-Seite

Für die Team-Seite, die wir ab Kapitel 17 bauen, wird genau dieses Muster zum Einsatz kommen: ein Grid mit einer Spalte auf Mobilgeräten, das sich auf größeren Bildschirmen zu zwei oder drei Spalten öffnet - kombiniert mit einer Alpine-Filterlogik, die unabhängig von der Bildschirmgröße funktioniert.