Seite 6 - Tailwind

Sobald eine Tabelle mehr Zeilen enthält, als auf einen Bildschirm passen, verliert der Nutzer beim Scrollen schnell den Ueberblick, welche Spalte welchen Werten entspricht. Ein sticky fixierter Tabellenkopf löst das für vertikales Scrollen, eine eingefrorene erste Spalte für horizontales Scrollen bei sehr breiten Tabellen. Beide Techniken lassen sich rein mit CSS umsetzen, verlangen aber sorgfältige Handhabung von z-index-Stapeln und einige Sonderregeln für HTML-Tabellenelemente, die bei einer normalen div-basierten Sticky-Lösung nicht auftauchen.

Tailwind CSS v4 bringt einen neuen Compiler, CSS-first-Konfiguration, OKLCH-Farben und verbesserte Varianten. Dieses Cheatsheet deckt alle wichtigen Klassen und neuen Konzepte ab – als schnelle Referenz für den Entwickleralltag.

Eine Fortschrittsleiste, die sich beim Scrollen füllt, oder ein Bild mit Parallax-Effekt, wurde bisher fast immer mit einem JavaScript-Scroll-Listener gebaut, der bei jedem Scroll-Event neu berechnet. Mit scroll-timeline und view-timeline übernimmt der Browser diese Berechnung nativ und synchron zum Compositor-Thread, ganz ohne Skript.

Wer keine Maus benutzt, verlässt sich vollständig auf eine funktionierende Tastaturnavigation. Skip-Links, eine logische Fokus-Reihenfolge und ein sauberer Focus-Trap in Modals entscheiden darüber, ob eine Tailwind CSS Anwendung für Tastaturnutzer bedienbar oder unbenutzbar ist.

Ein Designteam liefert meist genau einen Hex-Wert für die Markenfarbe, aber Tailwind erwartet eine vollständige Skala von 50 bis 950 für Hintergründe, Rahmen, Text und Hover-Zustände. Wer diese elf Stufen von Hand in einem Grafikprogramm zusammenklickt, bekommt selten ein konsistentes Ergebnis, weil sich Helligkeit und Sättigung ohne festen Farbraum kaum gleichmäßig abstufen lassen. Mit einer OKLCH-basierten Interpolation lässt sich dieser Prozess automatisieren und liefert Skalen, die sich genauso gleichmäßig anfühlen wie Tailwinds eingebaute Paletten.

Filter Utilities wie blur, brightness und grayscale wirken auf den ersten Blick wie kosmetische Spielerei, lösen in Tailwind aber ein technisch anspruchsvolles Problem: mehrere Filter-Funktionen werden zu einer einzigen CSS-Deklaration komponiert. Wer versteht, wie diese Komposition funktioniert und wo Backdrop-Filter an Grenzen stoßen, baut Effekte, die auch auf Mobilgeräten flüssig bleiben.

CMS-Content ohne Tailwind Typography Plugin zu stylen bedeutet: Hunderte von reset-Regeln manuell überschreiben. Das @tailwindcss/typography Plugin löst dieses Problem mit der prose-Klasse – und gibt Entwicklern gleichzeitig präzise Kontrolle über jeden typografischen Detail.

Ein separater Tailwind-Build für jeden White-Label-Kunden skaliert schlecht, sobald hundert Mandanten dieselbe Anwendung mit eigenem Farbschema nutzen wollen. Mit einem einzigen CSS-Bundle und serverseitig injizierten CSS-Variablen anhand des Hostnamens lässt sich White-Label-Theming ohne Rebuild pro Marke umsetzen, direkt auf Basis von Tailwind CSS v4 Design-Tokens.

Eine 404-Seite ist oft der letzte Kontaktpunkt, bevor ein Nutzer eine Website frustriert wieder verlässt, und trotzdem behandeln viele Projekte sie als reine Pflichtübung mit einer einzelnen grauen Textzeile. Dabei lässt sich mit wenigen Tailwind-Klassen und einem klaren Konzept aus Navigation, Suche und Markenidentität aus einer Sackgasse eine echte zweite Chance machen, inklusive einer sauberen Umsetzung als eigenes Symfony-Template.

Eine Command Palette ist mittlerweile fast schon Standard in Entwickler-Tools und zunehmend auch in normalen Web-Anwendungen: Mit einem Tastendruck öffnet sich ein zentriertes Suchfeld, das Befehle, Seiten oder Datensätze durchsucht und per Pfeiltasten navigierbar macht. Optisch steckt hinter dem scheinbar einfachen Muster eine ganze Reihe von Detailproblemen: korrekte Overlay-Positionierung, ein klar erkennbarer aktiver Eintrag, Gruppen mit eigenen Ueberschriften und eine visuelle Hervorhebung der Treffer aus der Fuzzy-Suche. Dieser Artikel zeigt, wie sich all das mit reinem Tailwind CSS und etwas Alpine.js für den Zustand sauber und wartbar umsetzen lässt.