Tailwind CSS Cheat Sheet: Komplette Klassen-Referenz

Tailwind CSS ist ein Utility-First CSS-Framework, mit dem Sie Designs direkt im Markup erstellen konnen. Statt benutzerdefiniertes CSS zu schreiben, wenden Sie vorgefertigte Utility-Klassen an. Dieses vollstandige Tailwind CSS Cheat Sheet deckt alle wichtigen Klassenkategorien mit ihrer CSS-Ausgabe ab.

Warum Tailwind CSS und warum ein Cheat Sheet?

Tailwind CSS hat Hunderte von Utility-Klassen. Obwohl die Namenskonvention intuitiv ist, spart ein Nachschlagewerk Zeit und steigert die Produktivitat.

Abstande: Padding und Margin

Tailwind verwendet eine konsistente Abstandsskala. Die Zahl nach p- oder m- wird auf einen rem-Wert abgebildet (mal 0.25rem). Negative Margins verwenden das Prafix -m-.

Directional Padding & Margin

<!-- Spacing examples -->
<div class="p-4">padding 1rem all sides</div>
<div class="px-6 py-3">horizontal 1.5rem, vertical 0.75rem</div>
<div class="mt-8 mb-4">top margin 2rem, bottom margin 1rem</div>
<div class="mx-auto max-w-lg">centered container</div>
<div class="-mt-4">negative top margin (overlap)</div>
<div class="space-x-4">children spaced 1rem horizontally</div>
<div class="space-y-2">children spaced 0.5rem vertically</div>

Typografie

Utilities fur Schriftgrosse, Schriftstarke, Zeilenhohe, Zeichenabstand, Textausrichtung und Textfarbe.

Schriftgrosse

Schriftstarke

Zeilenhohe

Zeichenabstand

Textausrichtung

Textfarbe

<!-- Text color examples -->
<p class="text-black">text-black → color: #000</p>
<p class="text-white">text-white → color: #fff</p>
<p class="text-gray-500">text-gray-500 → color: #6b7280</p>
<p class="text-red-600">text-red-600 → color: #dc2626</p>
<p class="text-blue-500">text-blue-500 → color: #3b82f6</p>
<p class="text-green-700">text-green-700 → color: #15803d</p>
<p class="text-transparent">text-transparent → color: transparent</p>
<p class="text-current">text-current → color: currentColor</p>

Farben

Tailwind verwendet eine numerische Farbskala von 50 (hellste) bis 950 (dunkelste). Prafixe: bg- fur Hintergrund, text- fur Text, border- fur Rahmen.

Color Prefixes

<!-- Available color palettes -->
slate, gray, zinc, neutral, stone    <!-- Grays -->
red, orange, amber, yellow           <!-- Warm -->
lime, green, emerald, teal           <!-- Green -->
cyan, sky, blue, indigo              <!-- Blue -->
violet, purple, fuchsia, pink, rose  <!-- Purple/Pink -->

<!-- Gradient example -->
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Gradient background
</div>

Flexbox

Umfassende Flexbox-Utilities zum Erstellen flexibler Layouts.

Justify & Align

Gap

<!-- Flexbox layout examples -->
<!-- Centered content -->
<div class="flex items-center justify-center h-screen">
  <div>Perfectly centered</div>
</div>

<!-- Navbar: logo left, links right -->
<nav class="flex justify-between items-center p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

<!-- Responsive cards -->
<div class="flex flex-wrap gap-4">
  <div class="flex-1 min-w-[300px]">Card 1</div>
  <div class="flex-1 min-w-[300px]">Card 2</div>
  <div class="flex-1 min-w-[300px]">Card 3</div>
</div>

Grid

CSS Grid Utilities zum Erstellen zweidimensionaler Layouts.

Column & Row Span

<!-- Grid layout examples -->
<!-- 3-column grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>  <div>2</div>  <div>3</div>
  <div>4</div>  <div>5</div>  <div>6</div>
</div>

<!-- Responsive grid: 1 col mobile, 2 tablet, 3 desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- Dashboard layout with spanning -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-4">Header (full width)</div>
  <div class="col-span-1">Sidebar</div>
  <div class="col-span-3">Main content</div>
  <div class="col-span-2">Half width</div>
  <div class="col-span-2">Half width</div>
</div>

Layout: Breite, Hohe und Container

Utilities zur Steuerung von Elementdimensionen und Layout-Containern.

Height & Max/Min

<!-- Layout examples -->
<div class="container mx-auto px-4">
  Centered responsive container
</div>

<div class="max-w-2xl mx-auto">
  Max-width 672px, centered
</div>

<div class="w-full h-screen">
  Full width, full viewport height
</div>

<div class="min-h-screen flex flex-col">
  <main class="flex-1">Content</main>
  <footer>Footer always at bottom</footer>
</div>

Rahmen und abgerundete Ecken

Utilities fur Rahmenbreite, Stil, Radius und Ring-Effekte.

Border Radius

Ring (Outline)

Schatten und Effekte

Utilities fur Box-Schatten, Deckkraft und Unschaerfe-Effekte.

Opacity & Blur

Ubergange und Animationen

Utilities fur CSS-Ubergange und Keyframe-Animationen.

Duration & Easing

Animations

<!-- Transition examples -->
<button class="bg-blue-500 hover:bg-blue-700 transition-colors duration-200">
  Smooth color change on hover
</button>

<div class="hover:scale-105 transition-transform duration-300 ease-out">
  Scale up on hover
</div>

<div class="hover:shadow-xl transition-shadow duration-300">
  Shadow appears on hover
</div>

<!-- Animation examples -->
<svg class="animate-spin h-5 w-5">...</svg>  <!-- Loading spinner -->
<span class="animate-ping absolute">...</span> <!-- Notification dot -->
<div class="animate-pulse bg-gray-300 h-4 rounded">...</div> <!-- Skeleton -->

Responsive Prafixe

Tailwind verwendet ein Mobile-First-Responsiv-Design. Stellen Sie jedem Utility ein Breakpoint-Prafix voran.

<!-- Mobile-first responsive design -->

<!-- Stack on mobile, side-by-side on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
  <div class="w-full md:w-1/3">Sidebar</div>
  <div class="w-full md:w-2/3">Main</div>
</div>

<!-- Responsive text size -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

<!-- Responsive grid columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Visible on md and above</div>
<div class="block md:hidden">Visible only below md</div>

<!-- Responsive padding -->
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
  Padding grows with screen size
</div>

Zustandsvarianten

Wenden Sie Styles bedingt mit Zustandsvarianten-Prafixen an.

<!-- State variant examples -->

<!-- Button with multiple states -->
<button class="bg-blue-500 hover:bg-blue-700 active:bg-blue-800
               focus:outline-none focus:ring-2 focus:ring-blue-300
               disabled:opacity-50 disabled:cursor-not-allowed
               transition-colors duration-200">
  Click me
</button>

<!-- Group hover: parent hover affects child -->
<div class="group p-4 hover:bg-blue-50 rounded-lg">
  <h3 class="group-hover:text-blue-600">Title</h3>
  <p class="group-hover:text-blue-400">Description</p>
</div>

<!-- Dark mode -->
<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Adapts to light/dark mode
</div>

<!-- Peer: input state affects sibling -->
<input class="peer" type="text" placeholder="Email" />
<p class="invisible peer-invalid:visible text-red-500">
  Invalid email address
</p>

Tipps und fortgeschrittene Nutzung

Power-User-Funktionen wenn die integrierten Utilities nicht ausreichen.

Beliebige Werte

Verwenden Sie eckige Klammern fur benutzerdefinierte Werte:

<!-- Arbitrary values with square brackets -->
<div class="w-[120px]">width: 120px</div>
<div class="h-[calc(100vh-80px)]">height: calc(100vh - 80px)</div>
<div class="bg-[#1a2b3c]">background: #1a2b3c</div>
<div class="text-[22px]">font-size: 22px</div>
<div class="grid-cols-[200px_1fr_200px]">custom grid template</div>
<div class="p-[clamp(1rem,3vw,3rem)]">responsive clamp padding</div>
<div class="text-[color:var(--brand)]">CSS variable color</div>
<div class="top-[var(--header-h)]">CSS variable position</div>

Important-Modifikator

Stellen Sie ! voran um !important hinzuzufugen:

<!-- Important modifier with ! prefix -->
<div class="!p-4">padding: 1rem !important</div>
<div class="!mt-0">margin-top: 0 !important</div>
<div class="!text-red-500">color: #ef4444 !important</div>

<!-- Useful for overriding third-party styles -->
<div class="external-widget !bg-transparent !border-none">
  Override library styles
</div>

@apply-Direktive

Extrahieren Sie wiederholte Utility-Muster in benutzerdefinierte CSS-Klassen:

/* In your CSS file — use @apply to extract components */
.btn {
  @apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
}

.btn-primary {
  @apply btn bg-blue-500 text-white hover:bg-blue-700;
}

.btn-secondary {
  @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300;
}

.input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md
         focus:outline-none focus:ring-2 focus:ring-blue-500
         focus:border-transparent;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-md p-6
         hover:shadow-lg transition-shadow duration-300;
}

/* Note: Tailwind recommends using utilities directly in HTML
   and only extracting with @apply for truly repeated patterns. */

Haufig gestellte Fragen