Seite 10 - Tailwind

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.

Eine Liste mit mehreren tausend Einträgen bringt jeden Browser ins Schwitzen, sobald jeder Eintrag ein eigener DOM-Knoten mit Tailwind-Klassen für Padding, Border und Hover-States ist. Virtualisierung löst das Problem, indem nur die aktuell sichtbaren Elemente tatsächlich gerendert werden, bringt dabei aber eigene Styling-Herausforderungen mit sich, von variabler Item-Höhe bis zu Sticky-Headers innerhalb der virtualisierten Liste.

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.

Ein frisches Hyvä-Theme liefert im Entwicklungsmodus ein CSS-Bundle von mehreren Megabyte aus, weil Tailwind CSS im Watch-Modus bewusst nicht purged. Der CSS-Purge-Schritt im Production-Build scannt jede phtml- und Alpine.js-Datei nach tatsächlich verwendeten Klassennamen und reduziert das Stylesheet dadurch auf wenige Kilobyte, sofern dynamische Klassennamen korrekt behandelt und die Deploy-Sequenz sauber ausgeführt wird.

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.

Sternebewertungen wirken auf den ersten Blick wie eine triviale Komponente, doch sobald halbe Sterne, eine interaktive Eingabe mit Hover-Vorschau und eine barrierefreie Umsetzung gleichzeitig gefordert sind, stecken mehr Detailprobleme darin als man denkt. Dieser Artikel zeigt, wie sich sowohl die read-only Anzeige einer Durchschnittsbewertung als auch die editierbare Eingabe-Variante mit Tailwind CSS sauber umsetzen lassen, inklusive der präzisen Darstellung halber Sterne und einer Barrierefreiheit, die nicht allein auf visuellen Sternen beruht.

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.