LAYOUT / UTILITY-REFERENZ

Layout & Positionierung

Bestimme, wie Elemente am Dokumentfluss teilnehmen, wo sie stehen und wie überlaufender Inhalt behandelt wird. Die Klassen greifen direkt in HTML und in von PHP erzeugtem Markup.

Ausprobieren und übernehmen

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

Status relativ zum Container platzieren

relative schafft den Bezug für absolute. end-2 verwendet das logische Ende und berücksichtigt die Schreibrichtung.

Aktiv

Projektübersicht

HTML

<div class="relative border rounded p-6 h-32 bg-surface">
  <span class="absolute top-2 end-2 bg-accent rounded-full px-3 py-1 text-sm">Aktiv</span>
  <p class="mt-8 font-semibold">Projektübersicht</p>
</div>

Überlauf kontrollieren

Ein begrenzter Bereich kann seinen Inhalt scrollen, ohne den Rest der Seite zu verbreitern.

Aktivitäten

Projekt angelegt

Team zugewiesen

Entwurf geprüft

Freigabe vorbereitet

HTML

<div class="h-32 overflow-y-auto border rounded p-4 bg-surface">
  <p class="font-semibold">Aktivitäten</p>
  <p class="mt-4">Projekt angelegt</p>
  <p class="mt-4">Team zugewiesen</p>
  <p class="mt-4">Entwurf geprüft</p>
  <p class="mt-4">Freigabe vorbereitet</p>
</div>

Unterstützte Klassen

Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.

Anzeige und Dokumentfluss

hidden entfernt ein Element aus dem Layout; invisible erhält seinen Platz.

Anzeige und Dokumentfluss: Klassen und erzeugtes CSS
Klasse	CSS
`block`	`display:block`
`inline-block`	`display:inline-block`
`inline`	`display:inline`
`flex`	`display:flex`
`inline-flex`	`display:inline-flex`
`grid`	`display:grid`
`hidden`	`display:none`
`sr-only`	`position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0`
`visible`	`visibility:visible`
`invisible`	`visibility:hidden`
`isolate`	`isolation:isolate`

11 unterstützte Basisklassen in dieser Gruppe.

Positionsart und Ebenen

Absolute Positionen benötigen in der Regel einen positionierten Vorfahren. Höhere z-Werte gelten innerhalb des jeweiligen Stapelkontexts.

Positionsart und Ebenen: Klassen und erzeugtes CSS
Klasse	CSS
`relative`	`position:relative`
`absolute`	`position:absolute`
`fixed`	`position:fixed`
`sticky`	`position:sticky`
`static`	`position:static`
`z-0`	`z-index:0`
`z-10`	`z-index:10`
`z-20`	`z-index:20`
`z-30`	`z-index:30`
`z-40`	`z-index:40`
`z-50`	`z-index:50`

11 unterstützte Basisklassen in dieser Gruppe.

Abstand zu Kanten

start/end und inset-x verwenden logische Eigenschaften. Zahlenwerte skalieren mit der Seitendichte, Bruchpositionen bleiben prozentual.

Abstand zu Kanten: Klassen und erzeugtes CSS
Klasse	CSS
`inset-auto`	`inset:auto`
`inset-0`	`inset:0`
`inset-1`	`inset:calc(0.25rem * var(--r-density))`
`-inset-1`	`inset:calc(-0.25rem * var(--r-density))`
`inset-2`	`inset:calc(0.5rem * var(--r-density))`
`-inset-2`	`inset:calc(-0.5rem * var(--r-density))`
`inset-3`	`inset:calc(0.75rem * var(--r-density))`
`-inset-3`	`inset:calc(-0.75rem * var(--r-density))`
`inset-4`	`inset:calc(1rem * var(--r-density))`
`-inset-4`	`inset:calc(-1rem * var(--r-density))`
`inset-5`	`inset:calc(1.25rem * var(--r-density))`
`-inset-5`	`inset:calc(-1.25rem * var(--r-density))`
`inset-6`	`inset:calc(1.5rem * var(--r-density))`
`-inset-6`	`inset:calc(-1.5rem * var(--r-density))`
`inset-8`	`inset:calc(2rem * var(--r-density))`
`-inset-8`	`inset:calc(-2rem * var(--r-density))`
`inset-10`	`inset:calc(2.5rem * var(--r-density))`
`-inset-10`	`inset:calc(-2.5rem * var(--r-density))`
`inset-12`	`inset:calc(3rem * var(--r-density))`
`-inset-12`	`inset:calc(-3rem * var(--r-density))`
`inset-16`	`inset:calc(4rem * var(--r-density))`
`-inset-16`	`inset:calc(-4rem * var(--r-density))`
`inset-20`	`inset:calc(5rem * var(--r-density))`
`-inset-20`	`inset:calc(-5rem * var(--r-density))`
`inset-24`	`inset:calc(6rem * var(--r-density))`
`-inset-24`	`inset:calc(-6rem * var(--r-density))`
`inset-32`	`inset:calc(8rem * var(--r-density))`
`-inset-32`	`inset:calc(-8rem * var(--r-density))`
`inset-40`	`inset:calc(10rem * var(--r-density))`
`-inset-40`	`inset:calc(-10rem * var(--r-density))`
`inset-48`	`inset:calc(12rem * var(--r-density))`
`-inset-48`	`inset:calc(-12rem * var(--r-density))`
`inset-64`	`inset:calc(16rem * var(--r-density))`
`-inset-64`	`inset:calc(-16rem * var(--r-density))`
`inset-1/2`	`inset:50%`
`inset-full`	`inset:100%`
`inset-x-auto`	`inset-inline:auto`
`inset-x-0`	`inset-inline:0`
`inset-x-1`	`inset-inline:calc(0.25rem * var(--r-density))`
`-inset-x-1`	`inset-inline:calc(-0.25rem * var(--r-density))`
`inset-x-2`	`inset-inline:calc(0.5rem * var(--r-density))`
`-inset-x-2`	`inset-inline:calc(-0.5rem * var(--r-density))`
`inset-x-3`	`inset-inline:calc(0.75rem * var(--r-density))`
`-inset-x-3`	`inset-inline:calc(-0.75rem * var(--r-density))`
`inset-x-4`	`inset-inline:calc(1rem * var(--r-density))`
`-inset-x-4`	`inset-inline:calc(-1rem * var(--r-density))`
`inset-x-5`	`inset-inline:calc(1.25rem * var(--r-density))`
`-inset-x-5`	`inset-inline:calc(-1.25rem * var(--r-density))`
`inset-x-6`	`inset-inline:calc(1.5rem * var(--r-density))`
`-inset-x-6`	`inset-inline:calc(-1.5rem * var(--r-density))`
`inset-x-8`	`inset-inline:calc(2rem * var(--r-density))`
`-inset-x-8`	`inset-inline:calc(-2rem * var(--r-density))`
`inset-x-10`	`inset-inline:calc(2.5rem * var(--r-density))`
`-inset-x-10`	`inset-inline:calc(-2.5rem * var(--r-density))`
`inset-x-12`	`inset-inline:calc(3rem * var(--r-density))`
`-inset-x-12`	`inset-inline:calc(-3rem * var(--r-density))`
`inset-x-16`	`inset-inline:calc(4rem * var(--r-density))`
`-inset-x-16`	`inset-inline:calc(-4rem * var(--r-density))`
`inset-x-20`	`inset-inline:calc(5rem * var(--r-density))`
`-inset-x-20`	`inset-inline:calc(-5rem * var(--r-density))`
`inset-x-24`	`inset-inline:calc(6rem * var(--r-density))`
`-inset-x-24`	`inset-inline:calc(-6rem * var(--r-density))`
`inset-x-32`	`inset-inline:calc(8rem * var(--r-density))`
`-inset-x-32`	`inset-inline:calc(-8rem * var(--r-density))`
`inset-x-40`	`inset-inline:calc(10rem * var(--r-density))`
`-inset-x-40`	`inset-inline:calc(-10rem * var(--r-density))`
`inset-x-48`	`inset-inline:calc(12rem * var(--r-density))`
`-inset-x-48`	`inset-inline:calc(-12rem * var(--r-density))`
`inset-x-64`	`inset-inline:calc(16rem * var(--r-density))`
`-inset-x-64`	`inset-inline:calc(-16rem * var(--r-density))`
`inset-x-1/2`	`inset-inline:50%`
`inset-x-full`	`inset-inline:100%`
`inset-y-auto`	`inset-block:auto`
`inset-y-0`	`inset-block:0`
`inset-y-1`	`inset-block:calc(0.25rem * var(--r-density))`
`-inset-y-1`	`inset-block:calc(-0.25rem * var(--r-density))`
`inset-y-2`	`inset-block:calc(0.5rem * var(--r-density))`
`-inset-y-2`	`inset-block:calc(-0.5rem * var(--r-density))`
`inset-y-3`	`inset-block:calc(0.75rem * var(--r-density))`
`-inset-y-3`	`inset-block:calc(-0.75rem * var(--r-density))`
`inset-y-4`	`inset-block:calc(1rem * var(--r-density))`
`-inset-y-4`	`inset-block:calc(-1rem * var(--r-density))`
`inset-y-5`	`inset-block:calc(1.25rem * var(--r-density))`
`-inset-y-5`	`inset-block:calc(-1.25rem * var(--r-density))`
`inset-y-6`	`inset-block:calc(1.5rem * var(--r-density))`
`-inset-y-6`	`inset-block:calc(-1.5rem * var(--r-density))`
`inset-y-8`	`inset-block:calc(2rem * var(--r-density))`
`-inset-y-8`	`inset-block:calc(-2rem * var(--r-density))`
`inset-y-10`	`inset-block:calc(2.5rem * var(--r-density))`
`-inset-y-10`	`inset-block:calc(-2.5rem * var(--r-density))`
`inset-y-12`	`inset-block:calc(3rem * var(--r-density))`
`-inset-y-12`	`inset-block:calc(-3rem * var(--r-density))`
`inset-y-16`	`inset-block:calc(4rem * var(--r-density))`
`-inset-y-16`	`inset-block:calc(-4rem * var(--r-density))`
`inset-y-20`	`inset-block:calc(5rem * var(--r-density))`
`-inset-y-20`	`inset-block:calc(-5rem * var(--r-density))`
`inset-y-24`	`inset-block:calc(6rem * var(--r-density))`
`-inset-y-24`	`inset-block:calc(-6rem * var(--r-density))`
`inset-y-32`	`inset-block:calc(8rem * var(--r-density))`
`-inset-y-32`	`inset-block:calc(-8rem * var(--r-density))`
`inset-y-40`	`inset-block:calc(10rem * var(--r-density))`
`-inset-y-40`	`inset-block:calc(-10rem * var(--r-density))`
`inset-y-48`	`inset-block:calc(12rem * var(--r-density))`
`-inset-y-48`	`inset-block:calc(-12rem * var(--r-density))`
`inset-y-64`	`inset-block:calc(16rem * var(--r-density))`
`-inset-y-64`	`inset-block:calc(-16rem * var(--r-density))`
`inset-y-1/2`	`inset-block:50%`
`inset-y-full`	`inset-block:100%`
`top-auto`	`top:auto`
`top-0`	`top:0`
`top-1`	`top:calc(0.25rem * var(--r-density))`
`-top-1`	`top:calc(-0.25rem * var(--r-density))`
`top-2`	`top:calc(0.5rem * var(--r-density))`
`-top-2`	`top:calc(-0.5rem * var(--r-density))`
`top-3`	`top:calc(0.75rem * var(--r-density))`
`-top-3`	`top:calc(-0.75rem * var(--r-density))`
`top-4`	`top:calc(1rem * var(--r-density))`
`-top-4`	`top:calc(-1rem * var(--r-density))`
`top-5`	`top:calc(1.25rem * var(--r-density))`
`-top-5`	`top:calc(-1.25rem * var(--r-density))`
`top-6`	`top:calc(1.5rem * var(--r-density))`
`-top-6`	`top:calc(-1.5rem * var(--r-density))`
`top-8`	`top:calc(2rem * var(--r-density))`
`-top-8`	`top:calc(-2rem * var(--r-density))`
`top-10`	`top:calc(2.5rem * var(--r-density))`
`-top-10`	`top:calc(-2.5rem * var(--r-density))`
`top-12`	`top:calc(3rem * var(--r-density))`
`-top-12`	`top:calc(-3rem * var(--r-density))`
`top-16`	`top:calc(4rem * var(--r-density))`
`-top-16`	`top:calc(-4rem * var(--r-density))`
`top-20`	`top:calc(5rem * var(--r-density))`
`-top-20`	`top:calc(-5rem * var(--r-density))`
`top-24`	`top:calc(6rem * var(--r-density))`
`-top-24`	`top:calc(-6rem * var(--r-density))`
`top-32`	`top:calc(8rem * var(--r-density))`
`-top-32`	`top:calc(-8rem * var(--r-density))`
`top-40`	`top:calc(10rem * var(--r-density))`
`-top-40`	`top:calc(-10rem * var(--r-density))`
`top-48`	`top:calc(12rem * var(--r-density))`
`-top-48`	`top:calc(-12rem * var(--r-density))`
`top-64`	`top:calc(16rem * var(--r-density))`
`-top-64`	`top:calc(-16rem * var(--r-density))`
`top-1/2`	`top:50%`
`top-full`	`top:100%`
`right-auto`	`right:auto`
`right-0`	`right:0`
`right-1`	`right:calc(0.25rem * var(--r-density))`
`-right-1`	`right:calc(-0.25rem * var(--r-density))`
`right-2`	`right:calc(0.5rem * var(--r-density))`
`-right-2`	`right:calc(-0.5rem * var(--r-density))`
`right-3`	`right:calc(0.75rem * var(--r-density))`
`-right-3`	`right:calc(-0.75rem * var(--r-density))`
`right-4`	`right:calc(1rem * var(--r-density))`
`-right-4`	`right:calc(-1rem * var(--r-density))`
`right-5`	`right:calc(1.25rem * var(--r-density))`
`-right-5`	`right:calc(-1.25rem * var(--r-density))`
`right-6`	`right:calc(1.5rem * var(--r-density))`
`-right-6`	`right:calc(-1.5rem * var(--r-density))`
`right-8`	`right:calc(2rem * var(--r-density))`
`-right-8`	`right:calc(-2rem * var(--r-density))`
`right-10`	`right:calc(2.5rem * var(--r-density))`
`-right-10`	`right:calc(-2.5rem * var(--r-density))`
`right-12`	`right:calc(3rem * var(--r-density))`
`-right-12`	`right:calc(-3rem * var(--r-density))`
`right-16`	`right:calc(4rem * var(--r-density))`
`-right-16`	`right:calc(-4rem * var(--r-density))`
`right-20`	`right:calc(5rem * var(--r-density))`
`-right-20`	`right:calc(-5rem * var(--r-density))`
`right-24`	`right:calc(6rem * var(--r-density))`
`-right-24`	`right:calc(-6rem * var(--r-density))`
`right-32`	`right:calc(8rem * var(--r-density))`
`-right-32`	`right:calc(-8rem * var(--r-density))`
`right-40`	`right:calc(10rem * var(--r-density))`
`-right-40`	`right:calc(-10rem * var(--r-density))`
`right-48`	`right:calc(12rem * var(--r-density))`
`-right-48`	`right:calc(-12rem * var(--r-density))`
`right-64`	`right:calc(16rem * var(--r-density))`
`-right-64`	`right:calc(-16rem * var(--r-density))`
`right-1/2`	`right:50%`
`right-full`	`right:100%`
`bottom-auto`	`bottom:auto`
`bottom-0`	`bottom:0`
`bottom-1`	`bottom:calc(0.25rem * var(--r-density))`
`-bottom-1`	`bottom:calc(-0.25rem * var(--r-density))`
`bottom-2`	`bottom:calc(0.5rem * var(--r-density))`
`-bottom-2`	`bottom:calc(-0.5rem * var(--r-density))`
`bottom-3`	`bottom:calc(0.75rem * var(--r-density))`
`-bottom-3`	`bottom:calc(-0.75rem * var(--r-density))`
`bottom-4`	`bottom:calc(1rem * var(--r-density))`
`-bottom-4`	`bottom:calc(-1rem * var(--r-density))`
`bottom-5`	`bottom:calc(1.25rem * var(--r-density))`
`-bottom-5`	`bottom:calc(-1.25rem * var(--r-density))`
`bottom-6`	`bottom:calc(1.5rem * var(--r-density))`
`-bottom-6`	`bottom:calc(-1.5rem * var(--r-density))`
`bottom-8`	`bottom:calc(2rem * var(--r-density))`
`-bottom-8`	`bottom:calc(-2rem * var(--r-density))`
`bottom-10`	`bottom:calc(2.5rem * var(--r-density))`
`-bottom-10`	`bottom:calc(-2.5rem * var(--r-density))`
`bottom-12`	`bottom:calc(3rem * var(--r-density))`
`-bottom-12`	`bottom:calc(-3rem * var(--r-density))`
`bottom-16`	`bottom:calc(4rem * var(--r-density))`
`-bottom-16`	`bottom:calc(-4rem * var(--r-density))`
`bottom-20`	`bottom:calc(5rem * var(--r-density))`
`-bottom-20`	`bottom:calc(-5rem * var(--r-density))`
`bottom-24`	`bottom:calc(6rem * var(--r-density))`
`-bottom-24`	`bottom:calc(-6rem * var(--r-density))`
`bottom-32`	`bottom:calc(8rem * var(--r-density))`
`-bottom-32`	`bottom:calc(-8rem * var(--r-density))`
`bottom-40`	`bottom:calc(10rem * var(--r-density))`
`-bottom-40`	`bottom:calc(-10rem * var(--r-density))`
`bottom-48`	`bottom:calc(12rem * var(--r-density))`
`-bottom-48`	`bottom:calc(-12rem * var(--r-density))`
`bottom-64`	`bottom:calc(16rem * var(--r-density))`
`-bottom-64`	`bottom:calc(-16rem * var(--r-density))`
`bottom-1/2`	`bottom:50%`
`bottom-full`	`bottom:100%`
`left-auto`	`left:auto`
`left-0`	`left:0`
`left-1`	`left:calc(0.25rem * var(--r-density))`
`-left-1`	`left:calc(-0.25rem * var(--r-density))`
`left-2`	`left:calc(0.5rem * var(--r-density))`
`-left-2`	`left:calc(-0.5rem * var(--r-density))`
`left-3`	`left:calc(0.75rem * var(--r-density))`
`-left-3`	`left:calc(-0.75rem * var(--r-density))`
`left-4`	`left:calc(1rem * var(--r-density))`
`-left-4`	`left:calc(-1rem * var(--r-density))`
`left-5`	`left:calc(1.25rem * var(--r-density))`
`-left-5`	`left:calc(-1.25rem * var(--r-density))`
`left-6`	`left:calc(1.5rem * var(--r-density))`
`-left-6`	`left:calc(-1.5rem * var(--r-density))`
`left-8`	`left:calc(2rem * var(--r-density))`
`-left-8`	`left:calc(-2rem * var(--r-density))`
`left-10`	`left:calc(2.5rem * var(--r-density))`
`-left-10`	`left:calc(-2.5rem * var(--r-density))`
`left-12`	`left:calc(3rem * var(--r-density))`
`-left-12`	`left:calc(-3rem * var(--r-density))`
`left-16`	`left:calc(4rem * var(--r-density))`
`-left-16`	`left:calc(-4rem * var(--r-density))`
`left-20`	`left:calc(5rem * var(--r-density))`
`-left-20`	`left:calc(-5rem * var(--r-density))`
`left-24`	`left:calc(6rem * var(--r-density))`
`-left-24`	`left:calc(-6rem * var(--r-density))`
`left-32`	`left:calc(8rem * var(--r-density))`
`-left-32`	`left:calc(-8rem * var(--r-density))`
`left-40`	`left:calc(10rem * var(--r-density))`
`-left-40`	`left:calc(-10rem * var(--r-density))`
`left-48`	`left:calc(12rem * var(--r-density))`
`-left-48`	`left:calc(-12rem * var(--r-density))`
`left-64`	`left:calc(16rem * var(--r-density))`
`-left-64`	`left:calc(-16rem * var(--r-density))`
`left-1/2`	`left:50%`
`left-full`	`left:100%`
`start-auto`	`inset-inline-start:auto`
`start-0`	`inset-inline-start:0`
`start-1`	`inset-inline-start:calc(0.25rem * var(--r-density))`
`-start-1`	`inset-inline-start:calc(-0.25rem * var(--r-density))`
`start-2`	`inset-inline-start:calc(0.5rem * var(--r-density))`
`-start-2`	`inset-inline-start:calc(-0.5rem * var(--r-density))`
`start-3`	`inset-inline-start:calc(0.75rem * var(--r-density))`
`-start-3`	`inset-inline-start:calc(-0.75rem * var(--r-density))`
`start-4`	`inset-inline-start:calc(1rem * var(--r-density))`
`-start-4`	`inset-inline-start:calc(-1rem * var(--r-density))`
`start-5`	`inset-inline-start:calc(1.25rem * var(--r-density))`
`-start-5`	`inset-inline-start:calc(-1.25rem * var(--r-density))`
`start-6`	`inset-inline-start:calc(1.5rem * var(--r-density))`
`-start-6`	`inset-inline-start:calc(-1.5rem * var(--r-density))`
`start-8`	`inset-inline-start:calc(2rem * var(--r-density))`
`-start-8`	`inset-inline-start:calc(-2rem * var(--r-density))`
`start-10`	`inset-inline-start:calc(2.5rem * var(--r-density))`
`-start-10`	`inset-inline-start:calc(-2.5rem * var(--r-density))`
`start-12`	`inset-inline-start:calc(3rem * var(--r-density))`
`-start-12`	`inset-inline-start:calc(-3rem * var(--r-density))`
`start-16`	`inset-inline-start:calc(4rem * var(--r-density))`
`-start-16`	`inset-inline-start:calc(-4rem * var(--r-density))`
`start-20`	`inset-inline-start:calc(5rem * var(--r-density))`
`-start-20`	`inset-inline-start:calc(-5rem * var(--r-density))`
`start-24`	`inset-inline-start:calc(6rem * var(--r-density))`
`-start-24`	`inset-inline-start:calc(-6rem * var(--r-density))`
`start-32`	`inset-inline-start:calc(8rem * var(--r-density))`
`-start-32`	`inset-inline-start:calc(-8rem * var(--r-density))`
`start-40`	`inset-inline-start:calc(10rem * var(--r-density))`
`-start-40`	`inset-inline-start:calc(-10rem * var(--r-density))`
`start-48`	`inset-inline-start:calc(12rem * var(--r-density))`
`-start-48`	`inset-inline-start:calc(-12rem * var(--r-density))`
`start-64`	`inset-inline-start:calc(16rem * var(--r-density))`
`-start-64`	`inset-inline-start:calc(-16rem * var(--r-density))`
`start-1/2`	`inset-inline-start:50%`
`start-full`	`inset-inline-start:100%`
`end-auto`	`inset-inline-end:auto`
`end-0`	`inset-inline-end:0`
`end-1`	`inset-inline-end:calc(0.25rem * var(--r-density))`
`-end-1`	`inset-inline-end:calc(-0.25rem * var(--r-density))`
`end-2`	`inset-inline-end:calc(0.5rem * var(--r-density))`
`-end-2`	`inset-inline-end:calc(-0.5rem * var(--r-density))`
`end-3`	`inset-inline-end:calc(0.75rem * var(--r-density))`
`-end-3`	`inset-inline-end:calc(-0.75rem * var(--r-density))`
`end-4`	`inset-inline-end:calc(1rem * var(--r-density))`
`-end-4`	`inset-inline-end:calc(-1rem * var(--r-density))`
`end-5`	`inset-inline-end:calc(1.25rem * var(--r-density))`
`-end-5`	`inset-inline-end:calc(-1.25rem * var(--r-density))`
`end-6`	`inset-inline-end:calc(1.5rem * var(--r-density))`
`-end-6`	`inset-inline-end:calc(-1.5rem * var(--r-density))`
`end-8`	`inset-inline-end:calc(2rem * var(--r-density))`
`-end-8`	`inset-inline-end:calc(-2rem * var(--r-density))`
`end-10`	`inset-inline-end:calc(2.5rem * var(--r-density))`
`-end-10`	`inset-inline-end:calc(-2.5rem * var(--r-density))`
`end-12`	`inset-inline-end:calc(3rem * var(--r-density))`
`-end-12`	`inset-inline-end:calc(-3rem * var(--r-density))`
`end-16`	`inset-inline-end:calc(4rem * var(--r-density))`
`-end-16`	`inset-inline-end:calc(-4rem * var(--r-density))`
`end-20`	`inset-inline-end:calc(5rem * var(--r-density))`
`-end-20`	`inset-inline-end:calc(-5rem * var(--r-density))`
`end-24`	`inset-inline-end:calc(6rem * var(--r-density))`
`-end-24`	`inset-inline-end:calc(-6rem * var(--r-density))`
`end-32`	`inset-inline-end:calc(8rem * var(--r-density))`
`-end-32`	`inset-inline-end:calc(-8rem * var(--r-density))`
`end-40`	`inset-inline-end:calc(10rem * var(--r-density))`
`-end-40`	`inset-inline-end:calc(-10rem * var(--r-density))`
`end-48`	`inset-inline-end:calc(12rem * var(--r-density))`
`-end-48`	`inset-inline-end:calc(-12rem * var(--r-density))`
`end-64`	`inset-inline-end:calc(16rem * var(--r-density))`
`-end-64`	`inset-inline-end:calc(-16rem * var(--r-density))`
`end-1/2`	`inset-inline-end:50%`
`end-full`	`inset-inline-end:100%`

324 unterstützte Basisklassen in dieser Gruppe.

Überlauf, Seitenverhältnis und Medien

Die Klassen steuern begrenzte Container und die Darstellung von Bildern bzw. anderen Medien.

Überlauf, Seitenverhältnis und Medien: Klassen und erzeugtes CSS
Klasse	CSS
`overflow-auto`	`overflow:auto`
`overflow-hidden`	`overflow:hidden`
`overflow-x-auto`	`overflow-x:auto`
`aspect-square`	`aspect-ratio:1`
`aspect-video`	`aspect-ratio:16/9`
`object-cover`	`object-fit:cover`
`overflow-y-auto`	`overflow-y:auto`
`overscroll-contain`	`overscroll-behavior:contain`
`object-contain`	`object-fit:contain`

9 unterstützte Basisklassen in dieser Gruppe.

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