Seite 12 - Tailwind

E-Mail-Clients rendern kein modernes CSS, Outlook nutzt teilweise die Word-Rendering-Engine, und Flexbox oder Grid funktionieren dort schlicht nicht zuverlässig. Wer Tailwind-Utility-Klassen konsequent auf Tabellen-Layout überträgt, kann trotzdem konsistente, wartbare HTML-E-Mail-Templates bauen, ohne bei jedem Newsletter von vorne anzufangen.

Bestellbestätigungen, Versandbenachrichtigungen und Passwort-Reset-Mails teilen sich fast immer dieselbe Grundstruktur. MJML übernimmt dafür die zuverlässige, tabellenbasierte Layout-Ebene, während Tailwind-Utility-Klassen das visuelle Design liefern, sodass Transaktions-E-Mails wartbar bleiben statt aus verstreuten Kopien zu bestehen.

Tailwind CSS v4 ist kein inkrementelles Update – es ist ein Paradigmenwechsel. Die JavaScript-Konfigurationsdatei weicht einer reinen CSS-Konfiguration, PostCSS wird durch Lightning CSS ersetzt und das Design-Token-System arbeitet direkt über CSS Custom Properties. Diese Anleitung zeigt, wie die Migration von v3 zu v4 strukturiert und ohne Regressionen gelingt.

Ob Bestellverlauf, Audit-Log oder Aktivitäts-Feed eines Projekts: Chronologisch geordnete Ereignisse gehören zu den häufigsten wiederkehrenden UI-Mustern in Webanwendungen. Optisch stecken darin mehr Details als es zunächst scheint, von der vertikalen Verbindungslinie zwischen den Ereignissen über Icon-Badges pro Ereignistyp bis zum Umgang mit unterschiedlich langen Beschreibungstexten, die das Raster nicht durcheinanderbringen dürfen. Dieser Artikel zeigt, wie sich eine Timeline-Komponente mit reinem Tailwind CSS strukturiert aufbauen lässt und wo sich eine kompakte Activity-Liste von einer ausführlichen Timeline-Ansicht unterscheidet.

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.

Responsive Vue Komponenten scheitern oft an reinen CSS-Media-Queries, weil sich Komponenten in unterschiedlichen Layout-Kontexten unterschiedlich verhalten müssen, unabhängig von der Viewport-Breite. Container Queries, eigene Breakpoint-Composables und adaptive Slot-Strukturen lösen das strukturell statt mit immer mehr CSS-Ausnahmen.

dnd-kit übernimmt die komplexe Logik hinter Drag-and-Drop, Kollisionserkennung, Tastatursteuerung und Sensor-Management, liefert aber bewusst keine eigenen Styles mit. Die gesamte visuelle Kommunikation, welches Element gerade gezogen wird, wo es landen kann und wo die Lücke für den Drop entstehen wird, bleibt Aufgabe von CSS und Tailwind. Wer diese drei Zustände sauber trennt und über dnd-kits data-Attribute steuert, bekommt ein Drag-and-Drop-Erlebnis, das sich flüssig anfühlt und dem Nutzer jederzeit klar zeigt, was gerade passiert.

Statt für jede Transparenzstufe und jede Hover-Abdunklung eine eigene, fest generierte Utility-Klasse zu pflegen, berechnet die CSS-Funktion color-mix() Farbmischungen zur Laufzeit im Browser. Kombiniert mit CSS-Variablen für Theme-Farben lässt sich damit ein komplettes Farbsystem mit deutlich weniger generiertem CSS bauen.