Empty States mit Tailwind gestalten: Mehr als nur 'Keine Daten'

1. Warum ein leerer Zustand mehr braucht als 'Keine Daten'

Ein leerer Bildschirm ist für neue Nutzer oft der allererste Eindruck einer Funktion, noch bevor irgendwelche echten Daten vorhanden sind. Wer hier nur eine karge Textzeile wie 'Keine Einträge' zeigt, verschenkt die Chance, den Nutzer aktiv anzuleiten, und riskiert stattdessen den Eindruck, die Funktion sei kaputt oder noch nicht fertig entwickelt.

Ein durchdachter Empty State beantwortet drei Fragen gleichzeitig: Warum ist hier nichts zu sehen, ist das normal oder ein Fehler, und was kann ich als nächstes tun. Diese drei Antworten lassen sich mit Tailwind über eine klare visuelle Hierarchie aus Icon, Ueberschrift, Erklärtext und Aktions-Button abbilden, ohne dass dafür eine eigene Illustrations-Bibliothek nötig wäre.

2. Die drei Arten leerer Zustände: nie Daten, keine Treffer, alles erledigt

Ein leerer Zustand ist nicht gleich leerer Zustand. Beim allerersten Aufruf einer Funktion, etwa einer frisch angelegten Projekt-Liste, gab es noch nie Daten, hier steht Aufklärung und eine Einladung zum ersten Anlegen im Vordergrund. Bei einer Suche ohne Treffer dagegen existieren durchaus Daten, nur der aktuelle Filter oder Suchbegriff liefert nichts, hier braucht es Hinweise zum Anpassen der Suche statt einer Aufforderung, etwas neu zu erstellen.

Die dritte Art ist der positive Zero-State, etwa eine leere Aufgabenliste, weil alles erledigt wurde, oder eine leere Inbox nach dem Abarbeiten aller Nachrichten. Dieser Zustand sollte als Erfolg gefeiert werden statt neutral wie ein Fehlerfall behandelt zu werden, weil er tatsächlich das gewünschte Ziel des Nutzers darstellt.

3. Aufbau einer wiederverwendbaren Empty-State-Komponente mit Tailwind

Eine wiederverwendbare Komponente braucht Slots für Icon oder Illustration, Ueberschrift, Beschreibungstext und optionalen Aktions-Button, damit sie sich für alle drei Zustandsarten mit unterschiedlichem Inhalt befüllen lässt. Zentrierung über Flexbox mit flex flex-col items-center justify-center sorgt für ein ausgewogenes Erscheinungsbild unabhängig von der Höhe des umgebenden Containers.

Wichtig ist ausreichend vertikaler Abstand zwischen den Elementen über space-y-4 oder ähnliche Utility-Klassen, damit der Zustand nicht gedrängt wirkt, sowie eine maximale Textbreite über max-w-sm, damit lange Beschreibungstexte nicht über die gesamte Bildschirmbreite laufen und dadurch schwer lesbar werden.

<div class="flex flex-col items-center justify-center px-6 py-16 text-center">
  <svg class="mb-4 h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
      d="M9 13h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v11a2 2 0 002 2z" />
  </svg>
  <h3 class="text-lg font-semibold text-gray-900">Noch keine Projekte angelegt</h3>
  <p class="mt-2 max-w-sm text-sm text-gray-500">
    Lege dein erstes Projekt an, um Aufgaben zu sammeln und mit deinem Team zu teilen.
  </p>
  <button type="button"
    class="mt-6 rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500">
    Erstes Projekt anlegen
  </button>
</div>

4. Illustration oder Icon: Wann sich welches eignet

Ein einfaches Outline-Icon aus einer Icon-Bibliothek reicht in dicht gepackten Interfaces wie Admin-Tabellen oder Sidebar-Listen meist vollkommen aus und lässt sich problemlos mit Tailwind-Farbklassen an den Dark Mode anpassen. Eine aufwendigere Illustration eignet sich dagegen besser für prominente, seltener besuchte Screens wie eine leere Onboarding-Startseite, wo sie zusätzlich Persönlichkeit und Markenidentität transportieren kann.

Bei der Größe gilt: Ein Icon sollte nicht größer als nötig wirken, üblich sind Größen zwischen h-12 w-12 und h-16 w-16, während eine Illustration durchaus die volle verfügbare Breite eines Containers einnehmen darf. Zu große Icons wirken schnell wie ein Platzhalter-Fehler, zu kleine gehen im umgebenden Weißraum unter.

5. Handlungsorientierte Calls-to-Action statt bloßer Beschreibung

Ein Call-to-Action-Button im Empty State sollte immer ein konkretes Verb im Text tragen, etwa 'Erstes Projekt anlegen' statt einem vagen 'Loslegen', damit sofort klar ist, welche Aktion beim Klick ausgelöst wird. Der Button sollte zudem visuell als Primäraktion gestaltet sein, mit gefüllter Hintergrundfarbe statt einem blassen Textlink, damit er in der ansonsten ruhigen, leeren Fläche sofort ins Auge fällt.

Bei Suchtreffer-losen Zuständen ersetzt man den Erstellungs-Button meist durch sekundäre Aktionen wie 'Filter zurücksetzen' oder 'Suchbegriff ändern', weil eine Aufforderung zum Neuanlegen hier fachlich falsch wäre. Diese kontextabhängige Anpassung des Call-to-Action ist der Kernunterschied zwischen einem generischen und einem wirklich hilfreichen Empty State.

6. Leere Suchergebnisse gestalten: Tippfehler-Hinweis und Filter zurücksetzen

Bei einer Suche ohne Treffer hilft es, den tatsächlich eingegebenen Suchbegriff im Text zu wiederholen, etwa 'Keine Ergebnisse für "Turnschue"', damit der Nutzer sofort einen möglichen Tippfehler erkennt. Ergänzend kann ein Hinweis auf häufige Ursachen wie zu spezifische Filterkombinationen oder Rechtschreibfehler die Fehlersuche für den Nutzer deutlich beschleunigen.

Ein Button zum Zurücksetzen aller aktiven Filter sollte hier immer verfügbar sein, weil die häufigste Ursache für null Treffer eine zu enge Kombination mehrerer Filter ist, die der Nutzer selbst gesetzt hat. Ein sekundärer, dezenter Button-Stil über border border-gray-300 text-gray-700 unterscheidet diese Aktion visuell klar von einer primären Erstellungsaktion.

7. Leere Inbox als Erfolgs-Zustand kommunizieren ('Alles erledigt')

Eine leere Aufgabenliste oder ein leeres Postfach nach vollständiger Bearbeitung ist kein Fehler, sondern ein erreichtes Ziel, und genau so sollte die Gestaltung es auch vermitteln. Ein freundliches Icon wie ein Haken in einem grünen Kreis statt eines neutralen Ordner-Icons sowie eine positiv formulierte Ueberschrift wie 'Alles erledigt' statt 'Keine Einträge vorhanden' unterstreichen diesen Unterschied deutlich.

Farblich lohnt sich hier eine dezente Abweichung vom neutralen Grau anderer Empty States hin zu einem sanften Grünton über text-emerald-500, um die positive Konnotation zusätzlich zu verstärken. Ein Call-to-Action ist an dieser Stelle oft gar nicht nötig, da der Nutzer bereits am Ziel angekommen ist und keine weitere Aktion erwartet wird.

8. Dark Mode und Farbkontraste bei Empty States

Icons in hellem Grau wie text-gray-300 wirken im Light Mode dezent, verschwinden im Dark Mode auf dunklem Hintergrund aber fast vollständig, wenn keine dedizierte Dark-Mode-Klasse ergänzt wird. Ueber dark:text-gray-600 lässt sich ein Icon so anpassen, dass es im dunklen Modus einen ähnlich dezenten, aber noch klar sichtbaren Kontrast zum Hintergrund behält.

Auch der Beschreibungstext braucht im Dark Mode eine bewusst gewählte, hellere Grauabstufung wie dark:text-gray-400 statt des im Light Mode genutzten text-gray-500, weil dunklere Grautöne auf schwarzem Hintergrund schnell unter den WCAG-Mindestkontrast für Fließtext fallen und damit schwer lesbar werden.

9. Häufige Fehler bei Empty States und wie man sie vermeidet

Ein häufiger Fehler ist, denselben generischen Empty State für alle drei Zustandsarten zu verwenden, obwohl 'Nie Daten', 'Keine Treffer' und 'Alles erledigt' fachlich vollkommen unterschiedliche Situationen sind, die unterschiedliche Reaktionen der Nutzer erfordern. Ein weiterer Fehler ist ein Empty State ohne jede Handlungsmöglichkeit, der den Nutzer in einer Sackgasse zurücklässt statt ihm einen nächsten Schritt anzubieten.

Ebenfalls problematisch ist ein Empty State, der länger zu lesen braucht als die eigentliche Aufgabe dahinter, etwa ein Roman-artiger Erklärtext für eine simple leere Tabelle. Kurze, klare Sätze und ein einziger, eindeutiger Call-to-Action funktionieren in der Praxis fast immer besser als mehrere konkurrierende Buttons oder ausufernde Erklärungen.

10. Zusammenfassung

11. FAQ: Empty States mit Tailwind: Das Wichtigste auf einen Blick