Seite 9 - Tailwind

Formular-Elemente sind die am schwersten zu stylenden HTML-Elemente. Browser-Defaults, plattformspezifische Appearance und fehlende Utility-Angriffspunkte machen Checkboxen, Select-Dropdowns und Custom Inputs zu einer ständigen Herausforderung. Das @tailwindcss/forms Plugin löst das systematisch.

Der Glassmorphism-Trend kombiniert Transparenz, Blur-Effekte und subtile Borders zu einem optisch ansprechenden Glaseffekt. Mit Tailwind CSS sind die nötigen Utilities backdrop-blur, bg-white/10 und border-white/25 direkt verfügbar – aber der Teufel liegt im Detail von Kontrast, Performance und Barrierefreiheit.

Animationen und Transitions verbessern die User Experience – für die meisten Nutzer. Für Menschen mit vestibulären Störungen, Migräne oder Epilepsie können dieselben Animationen zu ernsthaften gesundheitlichen Problemen führen. Die Tailwind CSS motion-reduce-Variante macht es einfacher als je zuvor, Animationen barrierefrei zu gestalten und WCAG 2.2 zu erfüllen.

Tailwind entfernt beim Build jede Klasse, die es im Quellcode nicht als vollständigen String findet. Dynamisch zusammengesetzte Klassennamen verschwinden spurlos – die Safelist ist die chirurgisch präzise Lösung, die genau die richtigen Klassen im Bundle behält.

Sobald eigenes CSS außerhalb von Utility-Klassen geschrieben wird, taucht dieselbe Frage immer wieder auf: Wie kommt man an die Werte aus @theme, ohne sie doppelt zu pflegen? Die theme() Funktion in Tailwind CSS v4 beantwortet genau das, und sie funktioniert anders, als man es von CSS Custom Properties erwarten würde.

Data Attribute Variants wie data-[state=open] lassen Tailwind direkt auf Zustände reagieren, die eine Komponentenbibliothek oder Alpine.js im Markup setzt, ganz ohne dass JavaScript CSS-Klassen manuell hinzufügen oder entfernen muss. Kombiniert mit eigenen Custom Variants über @custom-variant entsteht State-Driven UI, die Zustand und Darstellung sauber trennt.

Ein Split-Pane-Layout mit einem per Maus verschiebbaren Trennbalken zwischen zwei Bereichen ist aus modernen Code-Editoren wie VS Code nicht mehr wegzudenken und findet sich zunehmend auch in Web-Anwendungen mit Datei-Baum, Vorschau oder Vergleichs-Ansichten. Die Herausforderung liegt weniger im offensichtlichen Teil, dem Ziehen des Trennbalkens, sondern in den Details: dynamische Grid-Spaltenbreiten, die per JavaScript und nicht per CSS allein gesetzt werden müssen, Mindestbreiten-Constraints, damit kein Panel komplett verschwindet, und ein Cursor-Feedback, das während des Ziehens konsistent bleibt. Dieser Artikel zeigt den vollständigen Aufbau eines Split-Pane-Layouts mit Tailwind CSS am Beispiel eines Code-Editors mit Datei-Baum links und Editor-Bereich rechts.

Von einfachen linearen Verläufen bis zu mehrschichtigen Mesh Gradients: Tailwind CSS bietet alle nötigen Gradient-Utilities für moderne Webdesigns. Dieser Artikel zeigt, wie Gradienten in Tailwind CSS wirklich funktionieren – von den Grundlagen bis zu komplexen animierten Hintergründen.

CSS :has() ist der erste echte Eltern-Selektor in der Geschichte von CSS. In Tailwind v4 nutzt du ihn direkt im Markup: has-[:checked], has-[input:focus], has-[.error]. Das ermöglicht Styles, die auf den Zustand von Kindselementen reagieren – ohne JavaScript und ohne eigene CSS-Datei.

Mehrere Marken oder Ländershops auf derselben Magento-Instanz brauchen unterschiedliche Farben, Schriften und teils sogar unterschiedliche Layouts, sollen aber dieselbe Codebasis nutzen. Sauberes Hyvä Multi Store Theming mit Tailwind CSS trennt gemeinsame Struktur von Store-spezifischen Design Tokens, statt für jede Marke eine komplette Kopie des Themes zu pflegen.