Wiederkehrende Magento-spezifische Muster wie Ladezustände, Store-Grid-Abstände oder Alpine-Sichtbarkeitszustände lassen sich nicht immer sauber mit Standard-Utilities abbilden. Ein eigenes Tailwind Plugin kapselt dieses Wissen einmalig und macht es über das gesamte Hyvä Theme wiederverwendbar, inklusive korrektem Kompilieren in der Build-Pipeline.
Eine Admin-Sidebar muss gleichzeitig viele Menüpunkte unterbringen, auf kleinen Bildschirmen verschwinden und trotzdem jederzeit erkennen lassen, wo sich die Nutzerin gerade befindet. Dieses Muster zeigt den kompletten Aufbau mit Tailwind CSS und Alpine.js: vom Icon-only-Zustand über verschachtelte Untermenüs bis zum Off-Canvas-Menü auf dem Smartphone, alles ohne zusätzliche JavaScript-Bibliothek.
Ein Video-Embed ohne festes Seitenverhältnis verschiebt beim Laden das gesamte Layout — und kostet Core Web Vitals-Punkte. Mit den aspect-ratio-Utilities von Tailwind CSS löst man dieses Problem sauber, responsiv und ohne Padding-Hack. Dieser Artikel zeigt alle Patterns — von 16:9 bis zu benutzerdefinierten Verhältnissen.