Seite 10 - Tailwind 4

Badges, die über eine Ecke ragen, Bildstapel mit Tiefeneffekt und versetzte Karten wirken erst dann hochwertig, wenn negative Margins, Inset-Utilities und Transform-Utilities gezielt zusammenspielen. Wer versteht, wie diese drei Werkzeuge sich unterscheiden und wo Stacking-Contexts zu unerwarteten Überlappungen führen, baut Overlap-Layouts, die auch bei responsiven Größenänderungen stabil bleiben.

position:sticky ist eines der nützlichsten CSS-Features für moderne Layouts – und eines der meistmissverstandenen. Die Klasse sticky in Tailwind CSS ist schnell geschrieben, aber ohne top, ohne Elternhöhe und mit overflow auf einem Vorfahren wird sie stillschweigend ignoriert.

Shadow DOM kapselt Styles standardmäßig so vollständig, dass globales Tailwind CSS gar nicht erst in eine Web Component gelangt. Mit Constructable Stylesheets, adoptedStyleSheets und dem ::part-Selektor lässt sich diese Kapselung gezielt öffnen, ohne die Isolationsgarantien des Shadow DOM aufzugeben. Dieser Artikel zeigt konkrete Muster für Custom Elements, die Tailwind CSS konsequent nutzen, ohne ihr CSS mehrfach auszuliefern.

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.

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.

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.

Angular Standalone Components entfernen den NgModule-Ballast aus jedem Feature, und Tailwind CSS entfernt den Ballast aus dem Stylesheet. Zusammen entsteht eine Architektur, in der jede Komponente ihre Abhängigkeiten und ihr Aussehen selbst mitbringt, ohne globale Klassenlisten und ohne verschachtelte Modul-Deklarationen. Dieser Artikel zeigt Setup, Signals-Integration, Reactive Forms und die Content-Scanning-Fallstricke, die bei Angular-Projekten besonders häufig auftreten.