Tailwind CSS Cheatsheet
Über diese Referenz · Wichtige Änderungen ggü. v3 (Vorsicht bei Upgrades!) · Display & Position · Flexbox · Grid · Spacing (Padding, Margin, Gap) · Sizing (Breite & Höhe) · Typography · Backgrounds & Gradients · Borders, Radius & Ring · Effekte & Filter · Farben & Skala · Responsive Breakpoints & Container-Queries · Dark Mode & State-Variants · Übergänge, Animation & Transform · Interaktivität · Tabellen, SVG & Sonstiges · Arbitrary Values, Wichtig-Modifier & v4-Setup · Layout-Muster: Zentrierter Container · Layout-Muster: Flex zentrieren · Layout-Muster: Responsives Grid · Layout-Muster: Featured Card + Grid · Layout-Muster: Sidebar + Hauptinhalt · Layout-Muster: Split-Screen · Layout-Muster: Holy-Grail-Layout · Layout-Muster: Sticky Header · Layout-Muster: Sticky Footer · Layout-Muster: Hero-Section · Layout-Muster: Masonry-artiges Grid · Layout-Muster: App-Shell mit Bottom-Nav
Über diese Referenz
Nächstes Kapitel: Wichtige Änderungen ggü. v3 (Vorsicht bei Upgrades!) →
Alle wichtigen Utility-Klassen und die gängigsten Layout-Muster von Tailwind CSS v4.1 (aktuelle Version, Stand 2026) — neue Engine (Oxide/Rust), CSS-first-Konfiguration über @theme statt tailwind.config.js, native Container-Queries, OKLCH-Farben als Standard-Farbraum.
Wichtige Änderungen ggü. v3 (Vorsicht bei Upgrades!)
Nächstes Kapitel: Display & Position →
Ring: Standardbreite geändert von 3px auf 1px, Standardfarbe von blue-500 auf currentColor. Alten Look explizit erzwingen: ring-3 ring-blue-500.
Border/Divide: Standardfarbe geändert von gray-200 auf currentColor (wie der Browser-Default). Farbe jetzt immer explizit angeben: border border-gray-200.
Wichtig-Modifier: Das ! steht in v4 konsistent am ENDE der Klasse: hover:bg-red-500! statt der alten v3-Schreibweise hover:!bg-red-500 (davor, wird aus Kompatibilität teils noch akzeptiert).
Kein tailwind.config.js mehr nötig — Konfiguration läuft über CSS (@theme, @import), Inhalte werden automatisch erkannt.
Display & Position
| Klasse | Beschreibung |
|---|---|
block, inline-block, inline |
Anzeigetyp: Blockelement, Inline-Block, Inline. |
flex, inline-flex |
Flex-Container (block bzw. inline). |
grid, inline-grid |
Grid-Container (block bzw. inline). |
hidden |
display: none — Element aus dem Layout entfernen. |
table, table-row, table-cell |
Tabellen-Anzeigetypen für Nicht-Table-Elemente. |
relative, absolute, fixed, sticky |
Positionierungskontext. |
static |
Standard-Positionierung (Reset). |
top-0, right-0, bottom-0, left-0 |
Versatz bei absolut/fixed/sticky positionierten Elementen. |
inset-0, inset-x-0, inset-y-0 |
Alle vier Seiten (bzw. nur x/y) gleichzeitig setzen. |
z-0, z-10, z-50, -z-10 |
Stapelreihenfolge (auch negative Werte). |
float-left, float-right, float-none |
Element umfließen lassen. |
clear-left, clear-right, clear-both |
Umfließen beenden. |
object-cover, object-contain, object-fill |
object-fit für img/video. |
object-center, object-top, object-left |
object-position. |
aspect-square, aspect-video, aspect-[4/3] |
Seitenverhältnis erzwingen. |
overflow-hidden, overflow-auto, overflow-scroll |
Umgang mit überlaufendem Inhalt. |
overflow-x-auto, overflow-y-hidden |
Nur horizontal bzw. vertikal. |
visible, invisible, collapse |
Sichtbarkeit (invisible nimmt weiter Platz ein). |
isolate |
Neuen Stacking-Context erzwingen (isolation: isolate). |
container mx-auto |
Zentrierter Wrapper mit Breakpoint-Maximalbreiten. |
Flexbox
| Klasse | Beschreibung |
|---|---|
flex-row, flex-row-reverse |
Hauptachse horizontal (bzw. umgekehrt). |
flex-col, flex-col-reverse |
Hauptachse vertikal (bzw. umgekehrt). |
flex-wrap, flex-nowrap, flex-wrap-reverse |
Umbruchverhalten der Flex-Items. |
flex-1 |
flex: 1 1 0% — wächst/schrumpft gleichmäßig. |
flex-auto |
flex: 1 1 auto — Basis anhand des Inhalts. |
flex-initial |
flex: 0 1 auto — nur schrumpfen, nicht wachsen. |
flex-none |
flex: none — feste Größe, kein Wachsen/Schrumpfen. |
grow, grow-0 |
flex-grow ein-/ausschalten. |
shrink, shrink-0 |
flex-shrink ein-/ausschalten. |
basis-1/2, basis-64, basis-auto |
flex-basis: Anteil, feste Größe oder auto. |
order-1, order-2, order-last, -order-1 |
Visuelle Reihenfolge unabhängig vom DOM. |
justify-start, justify-center, justify-between, justify-evenly |
Ausrichtung auf der Hauptachse. |
items-start, items-center, items-end, items-stretch |
Ausrichtung auf der Kreuzachse. |
content-center, content-between, content-around |
Ausrichtung mehrerer Zeilen (bei flex-wrap). |
self-auto, self-center, self-stretch |
Kreuzachsen-Ausrichtung für ein einzelnes Item. |
gap-4, gap-x-2, gap-y-6 |
Abstand zwischen Flex-/Grid-Items. |
Grid
Nächstes Kapitel: Spacing (Padding, Margin, Gap) →
| Klasse | Beschreibung |
|---|---|
grid-cols-3, grid-cols-12, grid-cols-none |
Anzahl gleich breiter Spalten. |
grid-cols-[280px_1fr] |
Beliebige Spaltendefinition (arbitrary value). |
grid-rows-3, grid-rows-none |
Anzahl gleich hoher Zeilen. |
col-span-2, col-span-full |
Über wie viele Spalten ein Element reicht. |
row-span-2, row-span-full |
Über wie viele Zeilen ein Element reicht. |
col-start-2, col-end-4 |
Explizite Start-/End-Linie einer Spalte. |
row-start-1, row-end-3 |
Explizite Start-/End-Linie einer Zeile. |
grid-flow-row, grid-flow-col, grid-flow-dense |
Auto-Placement-Algorithmus. |
auto-cols-auto, auto-rows-min |
Größe implizit erzeugter Spuren. |
place-items-center |
align-items + justify-items in einem. |
place-content-center |
align-content + justify-content in einem. |
place-self-center |
align-self + justify-self für ein Item. |
gap-4, gap-x-6, gap-y-2 |
Abstand zwischen Grid-Zellen. |
Spacing (Padding, Margin, Gap)
Nächstes Kapitel: Sizing (Breite & Höhe) →
| Klasse | Beschreibung |
|---|---|
p-4, px-6, py-2, pt-0, pr-1, pb-8, pl-3 |
Padding gesamt / horizontal / vertikal / einzelne Seite. |
m-4, mx-auto, my-8, -mt-2 |
Margin gesamt / horizontal / vertikal / negativ. |
space-x-4, space-y-2 |
Abstand zwischen direkten Kindelementen (statt Flex/Grid-Gap). |
space-x-reverse |
Reihenfolge des Abstands bei reverse-Flex umkehren. |
Skala: 0, px, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24, 32, 64, 96 |
1 Einheit = 0.25rem = 4px. p-4 = 16px, p-8 = 32px. |
Sizing (Breite & Höhe)
Nächstes Kapitel: Typography →
| Klasse | Beschreibung |
|---|---|
w-full, w-screen, w-auto, w-1/2, w-1/3 |
Breite: 100%, 100vw, auto, Bruchteile. |
w-64, w-96, w-px, w-fit, w-min, w-max |
Breite: feste Werte, Inhaltsbasiert. |
h-full, h-screen, h-dvh, h-auto, h-64 |
Höhe — h-dvh nutzt die dynamische Viewport-Höhe (seit v3.4, wichtig gegen den Mobile-Browser-Adressleisten-Sprung). |
min-w-0, min-w-full, min-h-screen |
Mindestbreite/-höhe. |
max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl, max-w-prose |
Maximalbreite — max-w-prose für gut lesbaren Fließtext. |
max-h-full, max-h-screen, max-h-96 |
Maximalhöhe. |
size-8, size-full, size-1/2 |
Breite und Höhe gleichzeitig setzen (seit v3.4). |
Typography
Nächstes Kapitel: Backgrounds & Gradients →
| Klasse | Beschreibung |
|---|---|
font-sans, font-serif, font-mono |
Schriftfamilie. |
text-xs, text-sm, text-base, text-lg, text-xl, text-2xl … text-9xl |
Schriftgröße-Skala. |
font-thin, font-normal, font-medium, font-semibold, font-bold, font-black |
Schriftstärke. |
italic, not-italic |
Kursivschrift ein-/ausschalten. |
text-left, text-center, text-right, text-justify |
Textausrichtung. |
underline, line-through, no-underline |
Textdekoration. |
uppercase, lowercase, capitalize, normal-case |
Textumwandlung. |
leading-none, leading-tight, leading-normal, leading-loose |
Zeilenhöhe. |
tracking-tighter, tracking-normal, tracking-wide |
Buchstabenabstand. |
whitespace-nowrap, whitespace-pre-wrap |
Umgang mit Whitespace/Zeilenumbrüchen. |
truncate |
Einzeiliger Text mit Ellipsis abgeschnitten. |
line-clamp-2, line-clamp-3 |
Text nach n Zeilen abschneiden (mehrzeilig; seit v3.3 Core-Utility, vorher Plugin). |
break-words, break-all, text-wrap |
Umbruchverhalten. |
text-balance |
Gleicht Zeilenlängen bei Überschriften aus (seit v3.4). |
list-disc, list-decimal, list-none, list-inside |
Listenstil. |
indent-4 |
Erstzeileneinzug. |
Backgrounds & Gradients
Nächstes Kapitel: Borders, Radius & Ring →
| Klasse | Beschreibung |
|---|---|
bg-white, bg-slate-100, bg-blue-600 |
Hintergrundfarbe aus der Farbpalette. |
bg-transparent, bg-current |
Transparent bzw. aktuelle Textfarbe. |
bg-cover, bg-contain, bg-auto |
background-size für Bilder. |
bg-center, bg-top, bg-no-repeat |
Position/Wiederholung von Hintergrundbildern. |
bg-fixed, bg-local, bg-scroll |
background-attachment. |
bg-gradient-to-r, bg-gradient-to-br |
Richtung eines linearen Verlaufs. |
from-blue-500, via-purple-500, to-pink-500 |
Farbstopps eines Gradients. |
bg-clip-text |
Hintergrund (z.B. Gradient) auf Textform zuschneiden — mit text-transparent kombinieren. |
Borders, Radius & Ring
Nächstes Kapitel: Effekte & Filter →
| Klasse | Beschreibung |
|---|---|
border, border-2, border-t, border-x-0 |
Rahmenbreite gesamt oder je Seite. Farbe seit v4 nicht mehr automatisch grau — s. Hinweis oben. |
border-solid, border-dashed, border-dotted |
Rahmenstil. |
border-slate-200, border-transparent |
Rahmenfarbe — in v4 explizit angeben, sonst currentColor. |
rounded, rounded-md, rounded-lg, rounded-full, rounded-t-xl |
Eckenradius — rounded-full für Kreise/Pills. |
divide-x, divide-y, divide-slate-200 |
Rahmen zwischen Kindelementen (statt Gap). |
outline, outline-2, outline-offset-2 |
Outline (nimmt keinen Platz im Layout ein). |
ring-3 ring-blue-500 ring-offset-2 |
Fokus-/Hervorhebungsring. In v4 Breite/Farbe explizit angeben (Default seit v4 nur noch 1px/currentColor, s. Hinweis oben). |
Effekte & Filter
Nächstes Kapitel: Farben & Skala →
| Klasse | Beschreibung |
|---|---|
shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl |
Box-Shadow-Skala. |
shadow-none, shadow-inner |
Kein Schatten bzw. Innenschatten. |
opacity-0, opacity-50, opacity-100 |
Deckkraft des gesamten Elements. |
mix-blend-multiply, mix-blend-overlay |
Mischmodus mit dem Hintergrund. |
blur-sm, blur, blur-lg, blur-none |
Weichzeichnen (filter: blur). |
brightness-75, contrast-125, grayscale, saturate-150, sepia |
Weitere CSS-Filter. |
backdrop-blur-md, backdrop-brightness-90 |
Filter auf den Hintergrund hinter dem Element (Glassmorphism). |
drop-shadow, drop-shadow-lg |
Schatten, der der tatsächlichen Form folgt (z.B. bei PNG/SVG). |
Farben & Skala
Nächstes Kapitel: Responsive Breakpoints & Container-Queries →
| Klasse | Beschreibung |
|---|---|
slate, gray, zinc, neutral, stone |
Neutrale Grautöne — je nach gewünschtem Farbstich. |
red, orange, amber, yellow, lime, green, emerald, teal |
Warme bis kühle Buntfarben (Teil 1). |
cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose |
Kühle bis warme Buntfarben (Teil 2). |
Skala 50–950 |
Je Farbe 11 Abstufungen: 50 (sehr hell) bis 950 (sehr dunkel), 500 ist der Basiston. |
text-blue-600/50, bg-black/20 |
Opacity-Modifier direkt an der Farbe (Slash-Syntax, seit v3). |
OKLCH-Farbraum |
Tailwind v4 nutzt standardmäßig OKLCH statt RGB/HSL für die Standardpalette — wahrnehmungsgleichmäßiger, weiteres Farbspektrum auf modernen Displays. |
@theme { --color-brand: oklch(...); } |
Eigene Farben in v4 direkt in CSS definieren statt in tailwind.config.js. |
Responsive Breakpoints & Container-Queries
Nächstes Kapitel: Dark Mode & State-Variants →
| Klasse | Beschreibung |
|---|---|
sm: (≥ 640px) |
Kleine Tablets im Hochformat und größer. |
md: (≥ 768px) |
Tablets im Querformat und größer. |
lg: (≥ 1024px) |
Kleine Laptops und größer. |
xl: (≥ 1280px) |
Desktop und größer. |
2xl: (≥ 1536px) |
Große Bildschirme. |
md:flex, lg:grid-cols-3 |
Mobile-first: Klasse gilt ab dem genannten Breakpoint aufwärts. |
max-md:hidden |
Umgekehrt: gilt nur UNTERHALB des Breakpoints. |
@container |
Element zum Query-Container machen — Kinder reagieren dann auf DESSEN Breite, nicht den Viewport. |
@sm:flex, @lg:grid-cols-2 |
Container-Query-Varianten — bezogen auf den nächsten @container-Elter. Seit v4 fest eingebaut (vorher separates Plugin). |
@container/sidebar, @lg/sidebar:block |
Benannter Container, falls mehrere @container ineinander verschachtelt sind. |
@max-md:hidden |
Container-Query-Gegenstück zu max-md: — gilt unterhalb der genannten Container-Breite. |
Dark Mode & State-Variants
Nächstes Kapitel: Übergänge, Animation & Transform →
| Klasse | Beschreibung |
|---|---|
dark:bg-slate-900, dark:text-white |
Abweichende Styles im Dark Mode (class- oder media-basiert). |
hover:bg-blue-700, focus:ring-2, active:scale-95 |
Interaktionszustände. |
disabled:opacity-50, disabled:cursor-not-allowed |
Deaktivierter Zustand. |
visited:text-purple-600 |
Besuchter Link. |
checked:bg-blue-600, indeterminate:bg-gray-300 |
Checkbox-/Radio-Zustände. |
focus-visible:ring-2, focus-within:border-blue-500 |
Feinere Fokus-Varianten (Tastatur bzw. Kind-Element fokussiert). |
group + group-hover:text-white |
Auf Hover EINES Elternelements reagieren. |
peer + peer-checked:block |
Auf Zustand eines Geschwister-Elements reagieren (z.B. Checkbox). |
aria-expanded:rotate-180, aria-selected:bg-blue-50 |
Reagiert auf ARIA-Attribute (seit v3.2, kein v4-exklusives Feature). |
data-[state=open]:block |
Reagiert auf beliebige data-Attribute (arbitrary variant). |
has-[:checked]:border-blue-500 |
:has()-Selektor-Variante — seit v3.4, Styling anhand von Kindelementen. |
first:pt-0, last:border-0, odd:bg-gray-50, even:bg-white |
Struktur-Pseudoklassen für Listen/Tabellenzeilen. |
Übergänge, Animation & Transform
Nächstes Kapitel: Interaktivität →
| Klasse | Beschreibung |
|---|---|
transition, transition-colors, transition-transform |
Welche Eigenschaften animiert werden. |
duration-150, duration-300, duration-700 |
Dauer der Transition in Millisekunden. |
ease-in, ease-out, ease-in-out, ease-linear |
Timing-Funktion. |
delay-150, delay-300 |
Verzögerter Start. |
animate-spin, animate-ping, animate-pulse, animate-bounce |
Vordefinierte Keyframe-Animationen (z.B. Ladeindikatoren). |
scale-95, scale-105, scale-x-100 |
Skalierung (gesamt oder je Achse). |
rotate-45, -rotate-90, rotate-180 |
Rotation in Grad. |
translate-x-4, -translate-y-2, translate-x-1/2 |
Verschiebung — halbe Prozentwerte häufig fürs Zentrieren. |
skew-x-6, skew-y-3 |
Scherung. |
origin-center, origin-top-left |
Ursprungspunkt für Transformationen. |
Interaktivität
Nächstes Kapitel: Tabellen, SVG & Sonstiges →
| Klasse | Beschreibung |
|---|---|
cursor-pointer, cursor-not-allowed, cursor-grab |
Mauszeiger-Symbol. |
pointer-events-none, pointer-events-auto |
Element für Maus-/Touch-Events transparent machen. |
select-none, select-text, select-all |
Textauswahl steuern. |
resize, resize-none, resize-y |
Größenänderbarkeit von Textareas. |
scroll-smooth, scroll-auto |
Scrollverhalten (auf dem Scroll-Container, meist html). |
snap-x, snap-mandatory, snap-center |
CSS Scroll-Snap für Karussells/Slider. |
appearance-none |
Native Browser-Styles entfernen (z.B. bei Select/Checkbox). |
accent-blue-600 |
Akzentfarbe für native Checkbox/Radio/Range-Inputs. |
caret-blue-500 |
Farbe des Text-Cursors in Eingabefeldern. |
touch-none, touch-pan-y |
touch-action für Touch-Geräte. |
Tabellen, SVG & Sonstiges
Nächstes Kapitel: Arbitrary Values, Wichtig-Modifier & v4-Setup →
| Klasse | Beschreibung |
|---|---|
border-collapse, border-separate |
Rahmenmodell von Tabellen. |
table-auto, table-fixed |
Spaltenbreiten-Algorithmus. |
fill-current, fill-blue-500 |
Füllfarbe von SVG-Icons. |
stroke-current, stroke-2 |
Konturfarbe/-breite von SVG-Icons. |
sr-only, not-sr-only |
Nur für Screenreader sichtbar (bzw. wieder normal sichtbar). |
forced-color-adjust-none |
Verhalten im Windows-High-Contrast-Modus steuern. |
print:hidden, print:block |
Abweichende Styles fürs Drucken. |
antialiased, subpixel-antialiased |
Schriftglättung. |
Arbitrary Values, Wichtig-Modifier & v4-Setup
Nächstes Kapitel: Layout-Muster: Zentrierter Container →
| Klasse | Beschreibung |
|---|---|
w-[137px], bg-[#1da1f2], text-[22px] |
Beliebiger Wert in eckigen Klammern, wenn die Skala nicht reicht. |
top-[calc(100%+8px)] |
Auch CSS-Funktionen wie calc() sind erlaubt. |
bg-[url('/img/bg.png')] |
Arbitrary value mit String (z.B. Bild-URL). |
hover:bg-red-500! |
Wichtig-Modifier in v4: das ! steht am ENDE der Klasse (nicht mehr davor wie in v3, s. Hinweis oben). |
@import "tailwindcss"; |
Einziger nötiger Import in v4 (ersetzt @tailwind base/components/utilities). |
@theme { --font-display: "Inter"; } |
Design-Tokens direkt in CSS definieren statt tailwind.config.js. |
@source "../components"; |
Zusätzliche Quell-Verzeichnisse fürs Class-Scanning explizit angeben. |
Kein tailwind.config.js mehr nötig |
v4 erkennt Inhalte automatisch und konfiguriert sich über CSS (@theme, @import). |
Layout-Muster: Zentrierter Container
Nächstes Kapitel: Layout-Muster: Flex zentrieren →
<div class="container mx-auto px-4 max-w-6xl"> <!-- Inhalt --> </div>
Der Standard-Wrapper für praktisch jede Seite: container setzt Breakpoint-Maximalbreiten, mx-auto zentriert, px-4 verhindert, dass Inhalt am Rand klebt.
Layout-Muster: Flex zentrieren
Nächstes Kapitel: Layout-Muster: Responsives Grid →
<div class="flex items-center justify-center h-screen"> <div>Zentrierter Inhalt</div> </div>
Das klassische Zentrierungsmuster für Modals, Login-Screens, Empty-States.
Layout-Muster: Responsives Grid
Nächstes Kapitel: Layout-Muster: Featured Card + Grid →
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="rounded-lg border p-4">Karte 1</div> <div class="rounded-lg border p-4">Karte 2</div> <div class="rounded-lg border p-4">Karte 3</div> </div>
1 Spalte auf Mobil, 2 ab Tablet (md), 3 ab Desktop (lg) — Standardmuster für Karten-/Produktgrids.
Layout-Muster: Featured Card + Grid
Nächstes Kapitel: Layout-Muster: Sidebar + Hauptinhalt →
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="md:col-span-2 rounded-lg border p-6">Hauptkarte (breit)</div> <div class="rounded-lg border p-6">Nebenkarte</div> </div>
md:col-span-2 lässt eine Karte zwei Spalten einnehmen — typisch für Hero-/Featured-Bereiche in einem Grid.
Layout-Muster: Sidebar + Hauptinhalt
Nächstes Kapitel: Layout-Muster: Split-Screen →
<div class="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8 min-h-screen"> <aside class="border-r p-4">Sidebar (280px)</aside> <main class="p-6">Hauptinhalt (füllt den Rest)</main> </div>
Feste Sidebar-Breite per arbitrary value [280px_1fr]. Auf Mobil (unterhalb lg) stapeln sich beide Spalten automatisch.
Layout-Muster: Split-Screen
Nächstes Kapitel: Layout-Muster: Holy-Grail-Layout →
<div class="grid grid-cols-1 md:grid-cols-2 min-h-screen"> <div class="flex items-center justify-center bg-slate-900 text-white p-8">Links</div> <div class="flex items-center justify-center p-8">Rechts</div> </div>
Typisch für Login-/Signup-Seiten: Bild oder Markenbotschaft links, Formular rechts.
Layout-Muster: Holy-Grail-Layout
Nächstes Kapitel: Layout-Muster: Sticky Header →
<div class="min-h-screen grid grid-rows-[auto_1fr_auto]">
<header class="border-b p-4">Header</header>
<div class="grid grid-cols-1 lg:grid-cols-[240px_1fr]">
<aside class="border-r p-4 hidden lg:block">Sidebar</aside>
<main class="p-6">Hauptinhalt</main>
</div>
<footer class="border-t p-4">Footer</footer>
</div>Klassisches App-Layout: Header und Footer fest, Sidebar+Main teilen sich die verbleibende Höhe (1fr).
Layout-Muster: Sticky Header
Nächstes Kapitel: Layout-Muster: Sticky Footer →
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur border-b"> <nav class="container mx-auto px-4 py-3">Navigation</nav> </header>
sticky top-0 hält den Header beim Scrollen oben, backdrop-blur ergibt den „Glassmorphism"-Effekt.
Layout-Muster: Sticky Footer
Nächstes Kapitel: Layout-Muster: Hero-Section →
<div class="min-h-screen flex flex-col"> <main class="flex-1">Inhalt (wächst)</main> <footer class="p-4 border-t">Footer</footer> </div>
flex-1 auf dem Hauptbereich sorgt dafür, dass der Footer immer am unteren Rand bleibt — auch bei wenig Inhalt.
Layout-Muster: Hero-Section
Nächstes Kapitel: Layout-Muster: Masonry-artiges Grid →
<section class="min-h-[80vh] flex items-center justify-center text-center px-4 bg-gradient-to-br from-slate-900 to-slate-700 text-white">
<div class="max-w-2xl">
<h1 class="text-5xl font-bold mb-4">Titel</h1>
<p class="text-lg text-slate-300 mb-8">Untertitel</p>
<button class="bg-white text-slate-900 px-6 py-3 rounded-lg font-semibold">Los geht's</button>
</div>
</section>max-w-2xl verhindert zu breite Zeilen, min-h-[80vh] sorgt für eine wuchtige Above-the-fold-Sektion.
Layout-Muster: Masonry-artiges Grid
Nächstes Kapitel: Layout-Muster: App-Shell mit Bottom-Nav →
<div class="columns-1 md:columns-2 lg:columns-3 gap-4 [&>*]:mb-4 [&>*]:break-inside-avoid"> <div class="rounded-lg border p-4">Karte (kurz)</div> <div class="rounded-lg border p-4">Karte (lang, mehr Inhalt …)</div> </div>
CSS-Columns statt Grid für echtes Masonry mit unterschiedlich hohen Karten.
Layout-Muster: App-Shell mit Bottom-Nav
<div class="min-h-screen flex flex-col pb-16 md:pb-0">
<main class="flex-1 p-4">Inhalt</main>
<nav class="fixed bottom-0 inset-x-0 md:hidden border-t bg-white flex justify-around py-2">
<a href="#">Home</a><a href="#">Suche</a><a href="#">Profil</a>
</nav>
</div>Fixierte Tab-Bar unten, verschwindet ab md (dort z.B. durch eine Sidebar ersetzt).