</>
tw
Tailwind CSS · Container Queries · Responsive Design · CSS
Tailwind CSS Container Queries:
Komponenten responsiv ohne Viewport-Abhängigkeit

Viewport-Breakpoints sind das falsche Werkzeug für wiederverwendbare Komponenten. Eine Produktkarte, die auf 1200px Viewport „schmal" ist, kann auf demselben Viewport in einer Sidebar noch schmaler sein. Container Queries lösen genau dieses Problem – und Tailwind CSS v4 bringt erstklassigen Support dafür mit.

15 Min. Lesezeit @container · cqw · containment · Named Container · Hyvä Tailwind CSS v4 · CSS Container Queries Level 1 + 3

Inhaltsverzeichnis

  1. 1. Das Problem mit Viewport-Breakpoints
  2. 2. Was sind Container Queries?
  3. 3. Container Queries in Tailwind CSS v4
  4. 4. Named Containers für verschachtelte Layouts
  5. 5. Container-Einheiten: cqw, cqh, cqi, cqb
  6. 6. Praxis: Containerresponsive Produktkarte in Hyvä
  7. 7. Sidebar-Layouts ohne spezielle Breakpoint-Klassen
  8. 8. containment-Typen: inline-size vs. size
  9. 9. Container Queries vs. Media Queries: Vergleich
  10. 10. Zusammenfassung
  11. 11. FAQ

1. Das Problem mit Viewport-Breakpoints

Das klassische Problem mit Viewport-Breakpoints und Tailwind CSS wird deutlich, sobald eine Komponente in verschiedenen Layout-Kontexten eingesetzt wird. Eine Produktkarte mit sm:flex-row wird auf Smartphone-Breite vertikal und auf Tablet-Breite horizontal – korrekt für eine fullwidth-Liste. Dieselbe Karte in einer 300px breiten Sidebar sieht auf einem 1200px breiten Desktop-Monitor wie eine Desktop-Card aus, obwohl der Container genauso schmal ist wie ein Smartphone. Die Karte reagiert auf den Viewport, nicht auf ihren tatsächlichen Platz.

Das führt in der Praxis dazu, dass Entwickler entweder Sondervarianten der Komponente für Sidebar-Kontexte erstellen (ProductCardSidebar, ProductCardMain) oder den Viewport-Breakpoint so tief setzen, dass er in beiden Kontexten passt – was wiederum auf großen Bildschirmen die Vollbreiten-Variante zerstört. Tailwind CSS Container Queries lösen dieses Dilemma fundamental: Die Komponente reagiert auf ihren eigenen Container, nicht auf den Viewport. Diesel Produktkarte, in eine 300px Sidebar gesetzt, verhält sich wie auf einem Smartphone – ohne eine einzige zusätzliche CSS-Klasse.

2. Was sind Container Queries?

Container Queries sind ein CSS-Feature, das dem Browser erlaubt, Styles auf ein Element anzuwenden basierend auf der Größe seines übergeordneten Containers – nicht des Viewports. Die Syntax: Ein Element wird als Container markiert (container-type: inline-size), dann können Kindelelemente mit @container auf dessen Breite reagieren. In Tailwind: container oder @container als Klasse auf dem Container-Element, dann @sm:, @md:, @lg: als Container-Query-Prefixes auf den Kindelementen.

Der entscheidende Unterschied zu Media Queries: Container Queries sind lokal, nicht global. Drei verschiedene Container auf derselben Seite können gleichzeitig auf unterschiedliche Breitenbreakpoints reagieren – einer bei 400px Breite, einer bei 600px, einer bei 200px – ganz unabhängig voneinander. Das macht Komponenten wirklich portierbar: Dieselbe HTML-Struktur mit denselben Tailwind-Klassen funktioniert korrekt in jeder Breite, in jedem Layout-Kontext. In Hyvä-Projekten bedeutet das: Eine Produktkarte-phtml-Datei für alle Kontexte, statt spezielle Templates für Sidebar, Slider und Hauptlisting.


/* Container Queries in pure CSS — for understanding the concept */

/* Step 1: Mark the parent as a container */
.product-grid {
  container-type: inline-size;
  container-name: product-list; /* optional named container */
}

/* Step 2: Apply styles to children based on container width */
@container product-list (min-width: 28rem) {
  .product-card {
    flex-direction: row;
  }

  .product-card__image {
    width: 40%;
    flex-shrink: 0;
  }
}

/* Container units — relative to the container, not the viewport */
.product-card__title {
  font-size: clamp(0.875rem, 4cqw, 1.25rem); /* 4% of container width */
}

3. Container Queries in Tailwind CSS v4

Tailwind CSS v4 hat erstklassigen nativen Support für Container Queries. Das Container-Element bekommt die Klasse @container (nicht container – das ist eine andere Klasse für max-width-Layouts). Kindelemente können dann mit den Prefixes @sm:, @md:, @lg:, @xl: und @2xl: auf die Container-Breite reagieren. Diese Breakpoints beziehen sich nicht auf den Viewport, sondern auf den nächsten Vorfahren-Container mit @container-Klasse.

Die Standard-Container-Breakpoints in Tailwind CSS v4: @sm = 20rem (320px), @md = 28rem (448px), @lg = 32rem (512px), @xl = 36rem (576px), @2xl = 42rem (672px). Das heißt: Eine Komponente mit @md:flex-row wechselt auf horizontales Layout, sobald ihr Container breiter als 448px ist – unabhängig vom Viewport. In einem 1200px-breiten Layout mit 300px-Sidebar bleibt die Karte in der Sidebar vertikal (Container < 448px) und im Hauptbereich horizontal (Container > 448px), mit denselben Klassen.