LAYOUT / VARIANTEN / UTILITY-REFERENZ

Responsive Layouts & Zustände

Varianten wenden dieselben Basisklassen nur bei einer bestimmten Bildschirmbreite oder einem Zustand an. Die Klassenreferenz zeigt die Basisregel; der Präfix bestimmt, wann sie gilt.

Ausprobieren und übernehmen

Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.

Von einer zu drei Spalten

Ohne Präfix gilt die Klasse sofort. md: greift ab 768 px und bleibt bei größeren Breiten wirksam.

Eine Spalte mobil

Drei Spalten ab md

Gemeinsame Abstände

HTML

<div class="grid md:grid-cols-3 gap-3">
  <div class="border rounded p-4 bg-surface">Eine Spalte mobil</div>
  <div class="border rounded p-4 bg-surface">Drei Spalten ab md</div>
  <div class="border rounded p-4 bg-surface">Gemeinsame Abstände</div>
</div>

Hover und Fokus

Zustände sollten eine Tastaturalternative haben. Hier reagieren sowohl Hover als auch sichtbarer Tastaturfokus.

HTML

<button class="border rounded px-6 py-3 bg-surface text-text transition hover:bg-accent focus-visible:bg-accent">
  Mit Maus oder Tastatur
</button>

ARIA-Zustände

Die Klasse gestaltet den Zustand; die Anwendung bleibt dafür verantwortlich, das ARIA-Attribut korrekt zu setzen.

HTML

<div class="flex flex-wrap gap-3">
  <button aria-expanded="false" class="border rounded px-4 py-2 aria-expanded:bg-accent">Geschlossenes Beispiel</button>
  <button aria-expanded="true" class="border rounded px-4 py-2 aria-expanded:bg-accent">Offenes Beispiel</button>
</div>

Präfixe und ihre Bedeutung

Responsive Mindestbreiten
Präfix	Gilt ab
`sm:`	640 px
`md:`	768 px
`lg:`	1024 px
`xl:`	1280 px
`2xl:`	1536 px

Zustandspräfixe: hover:, focus-visible:, focus-within:, active:, disabled:, checked:, required:, invalid:, aria-expanded:, aria-selected:, dark:, print:.

Kombinierte Varianten sind für sm/md/lg/xl:hover: und sm/md/lg/xl:focus-visible: vorhanden, beispielsweise md:hover:bg-accent. Beliebig verschachtelte Kombinationen sind derzeit nicht enthalten.

dark: folgt einem Vorfahren mit data-theme="dark". In lokal verschachtelten Hell-/Dunkelbereichen sollte die Gestaltung über die vererbten Farbrollen erfolgen; die aktuelle Dark-Variante bildet nicht in jedem verschachtelten Fall den nächsten Modus nach.

Die required:- und invalid:-Varianten sind visuelle Zustände und ersetzen weder Formularlogik noch Servervalidierung. Druckvarianten benötigen eine Prüfung der tatsächlichen Druckausgabe.

Individuell kombinieren

Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.

Zur durchsuchbaren Gesamtübersicht · Farben und eigene Variablen