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
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
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) →
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) →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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).