Seite 3 - Tailwind

Ein inkonsistentes Button-System ist einer der häufigsten Wartungsprobleme in Tailwind-Projekten. Wer Buttons ad hoc zusammenstellt, baut über Monate hinweg eine Sammlung kaum unterscheidbarer Klassen-Kombinationen auf. Dieses Tutorial zeigt, wie man mit Tailwind CSS eine skalierbare Variantenbibliothek entwirft – von Primary bis Loading-State.

Ein Datei-Explorer im Browser muss eine beliebig tief verschachtelte Ordnerstruktur darstellen, ohne dass die Einrückung optisch aus dem Ruder läuft. Dieses Muster zeigt, wie sich ein rekursiver Baum mit Tailwind CSS und Alpine.js aufbauen lässt: von der Einrückungslogik über animierte Auf-/Zuklapp-Icons und dateityp-abhängige Symbole bis zur Hervorhebung von Auswahl und Drop-Zielen beim Verschieben per Drag-and-Drop.

Wer Inhalte für Screenreader bereitstellen will, ohne sie visuell anzuzeigen, greift oft reflexartig zu display:none. Das entfernt den Text aber komplett aus dem Accessibility Tree. Das sr-only Utility in Tailwind CSS löst genau dieses Problem: visuell unsichtbar, für assistive Technologien vollständig lesbar. Dieser Artikel zeigt, wie sr-only technisch funktioniert und wo es in echten Projekten den Unterschied macht.

Tailwind CSS und React zusammen zu verwenden, ist intuitiv – bis Klassen-Komposition, bedingte Styles und Varianten-Systeme komplex werden. Dieser Artikel zeigt die etablierten Best Practices: clsx für bedingte Klassen, den cn-Helper für Merge-sichere Komposition und cva für typsichere Varianten-Systeme in React-Komponenten.

Das offizielle Tailwind Upgrade Tool verspricht einen automatisierten Umstieg von v3 auf v4 mit einem einzigen Befehl. In der Praxis löst der Codemod die häufigsten Fälle zuverlässig, stolpert aber bei Custom Plugins, Safelist-Konfigurationen und deprecated Utilities, die still und ohne Warnung anders funktionieren als zuvor.

Ein Widget, das auf fremden Seiten eingebettet wird, muss sein eigenes Farbschema behalten, ohne von der Host-Seite überschrieben zu werden und ohne deren Styles zu verschmutzen. CSS Cascade Layers, :where() und ein eigener Token-Namespace lösen dieses Component-Theming-Problem in Tailwind CSS v4, ganz ohne Shadow DOM.

Wer Reports, Rechnungen oder Zertifikate als PDF erzeugen muss, kann dafür dieselbe Tailwind-CSS-Vorlage nutzen, die auch im Browser läuft. Puppeteer steuert Headless Chrome fern und ruft page.pdf() auf, wodurch das Layout inklusive Flexbox, Grid und Custom Properties originalgetreu ins PDF übernommen wird.

Ein sauberes Toast-System zeigt Erfolg, Fehler und Warnungen konsistent an, verschwindet nach der richtigen Zeitspanne von selbst und bleibt auch für Screenreader-Nutzer verständlich. Mit Tailwind CSS für die Varianten und Alpine.js für Stacking und Timer entsteht daraus eine einzige, projektweit wiederverwendbare Komponente.

Ein durchdachtes Design-Token-System ist die Grundlage jedes skalierbaren Frontend-Projekts. Mit Tailwind CSS v4 und @theme werden Design-Tokens zu CSS Custom Properties, die gleichzeitig als Tailwind-Utilities, in CSS-Eigenschaften und in JavaScript verfügbar sind – eine echte Single Source of Truth für Farben, Typografie, Spacing und mehr.

Eine leere Suchergebnisliste, eine frisch angelegte Inbox oder ein Dashboard ohne Aktivität sind Momente, in denen viele Anwendungen ihre Nutzer im Stich lassen. Ein guter Empty State erklärt nicht nur, warum nichts zu sehen ist, sondern gibt sofort eine konkrete nächste Handlung vor, und dafür braucht es mehr als eine graue Schriftzeile in der Bildschirmmitte.