Tailwind CSS Card-Varianten: Produktkarten, Infokarten und mehr

1. Das Grundprinzip der Tailwind CSS Card-Architektur

Eine Tailwind CSS Card ist mehr als ein weißes Rechteck mit Schatten. Im Kontext eines vollständigen Card-Systems ist sie eine strukturierte Kompositionseinheit mit klarer Slot-Architektur: Header (optional), Body (Pflicht), Footer (optional). Wer diese Trennung von Anfang an einhält, kann Varianten flexibel kombinieren, ohne jede Kombination separat zu implementieren. Das Grundprinzip ist: Die Card-Hülle definiert Rahmen, Schatten und Radius; die Slots definieren Padding und Layout; die Variante wählt Farbe, Hintergrund und Interaktivität.

In Tailwind-Projekten ohne dieses System sieht man häufig, wie jedes Template-File seine eigene Card-Interpretation hat – mal mit shadow-md, mal mit shadow-lg, mal mit border, mal ohne. Das ist nicht nur optisch inkonsistent, sondern macht globale Design-Anpassungen zum Albtraum. Eine zentrale Tailwind CSS Card-Definition im @layer components-Block oder in einer dedizierten cards.css-Datei löst dieses Problem. Alle Varianten erben von dieser Basis und können in einem einzigen Schritt aktualisiert werden, wenn sich das Design ändert.

2. Die Basis-Card: Struktur und gemeinsame Klassen

Die Basis-Tailwind CSS Card definiert den Container: bg-white rounded-2xl overflow-hidden shadow-sm border border-slate-200. Warum overflow-hidden? Damit abgerundete Ecken korrekt clippen – ohne dieses Property brechen Bilder und farbige Hintergrundblöcke über den Rand der Card hinaus. rounded-2xl ist der Standard-Radius im modernen Card-Design; er ist groß genug, um weich zu wirken, aber nicht so extrem wie rounded-3xl, das bei kleinen Cards deplatziert wirkt. Der leichte Border border border-slate-200 gibt Cards auf weißem Seitenhintergrund eine sichtbare Abgrenzung ohne schweren Schatten.

Card-Body und Card-Header werden als separate div-Elemente mit eigenem Padding strukturiert: .card-body { @apply p-5 sm:p-6; }, .card-header { @apply px-5 pt-5 sm:px-6 sm:pt-6; }. Diese Trennung ermöglicht, dass ein Bild als Card-Header ohne Padding direkt bis an den Rand der Card geht, während der Textinhalt darunter korrektes Padding erhält. Der Card-Footer bekommt border-t border-slate-100 und leichten Top-Padding, um sich visuell vom Body zu trennen. Mit diesen drei Slots lassen sich alle gängigen Tailwind CSS Card-Varianten aufbauen.

/* cards.css — Card component system */
@layer components {
  .card {
    @apply bg-white rounded-2xl overflow-hidden;
    @apply border border-slate-200 shadow-sm;
    @apply flex flex-col;
  }

  .card-header {
    @apply relative overflow-hidden;
  }

  .card-body {
    @apply p-5 sm:p-6 flex-1;
  }

  .card-footer {
    @apply px-5 pb-5 sm:px-6 sm:pb-6;
    @apply pt-4 border-t border-slate-100;
    @apply flex items-center gap-3;
  }

  /* Hover variant — adds lift and pointer cursor */
  .card-interactive {
    @apply transition-all duration-200 cursor-pointer;
    @apply hover:shadow-lg hover:-translate-y-0.5;
    @apply focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2;
  }
}

3. Die Produktkarte mit Bild, Preis und CTA

Die Produktkarte ist die häufigste Tailwind CSS Card-Variante in E-Commerce-Projekten wie Hyvä auf Magento 2. Sie hat eine klare vertikale Struktur: Produktbild oben, Titel, Kurzbeschreibung und Preis in der Mitte, CTA-Button unten. Die Herausforderung ist das Produktbild: Es soll unabhängig vom Seitenverhältnis des Original-Bildes immer denselben Raum in der Card einnehmen. Die Lösung in Tailwind: aspect-square oder aspect-[4/3] auf einem Container-div, kombiniert mit object-cover auf dem img-Tag. So wird das Bild immer gecroppt, nie gestaucht.

Der Preis in einer Produktkarte braucht typographische Hierarchie: großer, fetter Preis in einer Akzentfarbe (text-2xl font-bold text-sky-700), daneben in kleinerem, durchgestrichenem Text der UVP (text-sm text-slate-400 line-through). Der Abstand zwischen Preis und CTA-Button ist kritisch – zu wenig und der Button sieht zusammengequetscht aus, zu viel und die Card wächst ungleichmäßig, wenn Produkttitel unterschiedlich lang sind. Die Lösung: Flex-Column-Layout auf dem Card-Body mit justify-between, das den Preis oben und den Button unten positioniert, unabhängig von der Titelzeilenzahl.