Seite 13 - Tailwind

Ein kompletter Rewrite einer gewachsenen Bootstrap-Anwendung ist selten realistisch. Wer Bootstrap zu Tailwind migrieren will, ohne das Projekt für Wochen einzufrieren, braucht einen Stufenplan mit Bestandsaufnahme, Klassen-Mapping und einem sauberen Parallelbetrieb, der Seite für Seite ausrollt statt alles auf einmal zu riskieren.

Sobald mehr als ein Produkt dasselbe Tailwind Design System nutzt, wird jede Änderung an Tokens oder Komponenten zum potenziellen Breaking Change für fremden Code. Semantische Versionierung, ein gepflegtes Changelog und klare Deprecation-Fristen machen aus einem gefährlichen Update einen planbaren, kommunizierten Schritt.

Ein guter Schritt-Indikator zeigt jederzeit, wo im Formular-Wizard man sich befindet, welche Schritte bereits erledigt sind und wie viele noch folgen. Mit Tailwind CSS und Alpine.js lässt sich dieser Indikator konsequent aus wenigen wiederverwendbaren Zuständen aufbauen, statt für jeden Schritt eigenes Markup zu pflegen.

Ein Typografie Skalensystem definiert alle Schriftgrößen eines Projekts über ein festes mathematisches Verhältnis statt über zufällig gewählte Pixelwerte. Kombiniert mit CSS Custom Properties und clamp() entsteht daraus ein einziges System aus semantischen Tokens, das responsive Größen automatisch berechnet und über das gesamte Designsystem konsistent bleibt.

Viewport-Breakpoints sind das falsche Werkzeug für wiederverwendbare Komponenten. Eine Produktkarte, die auf 1200px Viewport „schmal" ist, kann auf demselben Viewport in einer Sidebar noch schmaler sein. Container Queries lösen genau dieses Problem – und Tailwind CSS v4 bringt erstklassigen Support dafür mit.

Scroll Snap ist CSS – kein JavaScript. Mit Tailwind CSS und wenigen Utility-Klassen entsteht ein Touch-fähiger Slider, der auf jedem Gerät nativ funktioniert. Alpine.js ergänzt Navigationspfeile, Dot-Indikatoren und Keyboard-Support ohne eine einzige externe Bibliothek zu laden.

Eine Diff-Ansicht muss auf einen Blick zeigen, was hinzugefügt, entfernt oder geändert wurde, egal ob als Side-by-Side-Vergleich zweier Spalten oder als kompaktere Inline-Darstellung. Dieses Muster zeigt, wie sich beide Varianten mit Tailwind CSS konsistent einfärben, mit Zeilennummern versehen und an einem praktischen Textvergleich zwischen zwei Versionen durchspielen lassen.

Klassische CSS-Custom-Properties sind reine Zeichenketten ohne Typ, weshalb der Browser sie nicht animieren kann, selbst wenn der Wert wie eine Zahl oder ein Winkel aussieht. Mit der @property-Regel lassen sich Custom Properties dagegen mit einem echten Syntax-Typ, einem Vererbungsverhalten und einem Initialwert registrieren, wodurch sie plötzlich animierbar werden. Dieser Artikel zeigt, wie sich @property sinnvoll mit Tailwind CSS kombinieren lässt, mit einem praktischen Beispiel für eine animierte Gradient-Winkel-Rotation.

Badges, Tags und Chips wirken einzeln betrachtet wie triviale kleine Bauteile, doch sobald sie in einer größeren Anwendung an zig verschiedenen Stellen auftauchen, entscheidet ein konsistentes System aus Größen, Farbvarianten und klaren Regeln für Interaktivität darüber, ob die Oberfläche aufgeräumt oder chaotisch wirkt. Dieser Artikel zeigt, wie sich ein wiederverwendbares Badge- und Chip-System mit Tailwind CSS aufbauen lässt, das auf Design-Tokens statt auf hartkodierten Farben pro Einzelfall basiert und klar zwischen statischen Badges und interaktiven, entfernbaren Chips unterscheidet.

Die Oxide Engine ist der in Rust geschriebene Kern von Tailwind CSS v4 und ersetzt den alten JavaScript-Scanner durch einen deutlich schnelleren, speicherbewussten Ansatz. Wer versteht, wie die Oxide Engine Quellcode scannt, Kandidaten extrahiert und inkrementell neu kompiliert, kann Content-Konfigurationen gezielter schreiben und ungewöhnliches Build-Verhalten souverän einordnen.