Seite 8 - Tailwind 4

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.

Professionelle Drucklayouts ohne ein separates Print-Stylesheet zu pflegen – die print-Variante von Tailwind CSS ermöglicht vollständig druckspezifische Utility-Klassen direkt im Template. Navigationselemente ausblenden, Farben für den Druck anpassen, Seitenumbrüche steuern und URLs im Drucklayout ausgeben: alles mit Tailwind CSS Print Styles.

Laravel Blade bringt mit Components, Attribute Bags und @props ein eigenes Kompositionssystem für serverseitig gerenderte Views mit, Tailwind CSS liefert dazu ein konsistentes Utility System für das Styling. Wer Tailwind CSS in Laravel Blade Projekten sauber aufsetzt, bekommt wiederverwendbare Components, eine schlanke Vite Build Pipeline und ein CSS Bundle, das nur die tatsächlich genutzten Klassen enthält.

Klassisches Tailwind CSS erzeugte in der Entwicklung Stylesheets mit 3 MB und mehr. Der JIT-Compiler löst dieses Problem fundamental: Er scannt Template-Dateien in Echtzeit, generiert ausschließlich benötigte Klassen on demand und bringt arbiträre Werte wie [clamp(1rem,5vw,3rem)] ohne Konfiguration zum Laufen.

Symfony 7 macht Webpack Encore optional: Der AssetMapper verwaltet JavaScript-Imports nativ über importmap, und die Tailwind CSS Standalone CLI verarbeitet CSS ohne npm. Das Ergebnis ist ein modernes Frontend-Setup, das im Produktionsbuild ohne Node.js auskommt – einfacher zu deployen, einfacher zu warten.

Ohne Governance zerfällt jedes Tailwind Design System früher oder später in Ausnahmen, doppelte Komponenten und widersprüchliche Tokens. Ein Governance-Modell mit klaren Rollen, einem leichtgewichtigen RFC-Prozess und definierten Freigabewegen hält das System konsistent, auch wenn zehn Entwickler gleichzeitig daran arbeiten.

Die Composition API von Vue 3 verändert, wie Logik zwischen Komponenten geteilt wird, und genau diese Verschiebung eröffnet neue Muster für Tailwind CSS in Vue 3 Projekten. Reaktive Klassenlisten, wiederverwendbare Composables für Varianten und ein sauberes Zusammenspiel mit Scoped Slots machen aus verstreuten Utility Klassen ein konsistentes, gut wartbares Design System.

Dark Mode in Tailwind CSS ist mehr als ein dark:-Präfix vor jeder Klasse. Eine durchdachte Dark-Mode-Strategie kombiniert Systemsynchronisation, Nutzerpräferenz-Persistenz, CSS Custom Properties und einen flicker-freien Toggle – von v3 bis zu den neuen @variant-Möglichkeiten in v4.

Der Hyvä Checkout besteht aus Alpine.js Komponenten ohne Knockout.js und ohne UI-Components, gestylt allein mit Tailwind CSS Utility-Klassen. Wer die richtigen Hyvä Checkout Styling Muster für Schrittindikator, Zahlungsartenauswahl und Bestellübersicht kennt, vermeidet Layout-Shifts, unklare Fehlerzustände und inkonsistente Abstände zwischen den Checkout-Schritten.