Tag: Tailwind 4

1. Barrierefreie Tooltips und Popover-Muster mit Tailwind CSS

   19.01.2025

   Ein Tooltip, der nur bei Mausbewegung erscheint, bleibt für Tastaturnutzer und Screenreader unsichtbar. Barrierefreie Tooltips mit Tailwind CSS verknüpfen Zusatzinformationen über aria-describedby, reagieren auf Hover und Fokus gleichermaßen und schließen sich zuverlässig per Escape.

   Read more

2. Tailwind CSS mit htmx: Hypermedia-Anwendungen stylen

   15.01.2025

   htmx bringt AJAX, Swap-Übergänge und serverseitiges Rendering zurück in einfache HTML-Attribute, und Tailwind CSS liefert dazu das passende Utility-First-Styling ohne separates Frontend-Build. Dieser Artikel zeigt, wie Ladezustände, Übergänge zwischen Swaps und dynamisch nachgeladene Fragmente konsistent gestylt werden, ohne dass ein komplettes JavaScript-Framework nötig ist.

   Read more

3. Build-Zeit-Optimierung für Tailwind CSS in Monorepos

   11.01.2025

   Wer Tailwind CSS in einem Monorepo mit vielen Paketen betreibt, kennt das Problem: Der Build-Prozess wird von Sekunden zu Minuten, sobald die Content-Konfiguration zu viele Dateien scannt. Mit gezielten Globs, Turborepo-Caching, Nx-Task-Pipelines und Parallelisierung lässt sich die Build-Zeit auch bei hunderten Paketen konsequent niedrig halten.

   Read more

4. Design System Adoption messen: Audit und Metriken für Tailwind

   05.01.2025

   Ob ein Tailwind Design System wirklich genutzt wird oder nur auf dem Papier existiert, lässt sich nicht erraten, sondern messen. Ein Utility-Audit-Skript, eine klare Token-Nutzungsquote und regelmäßige Drift-Berichte verwandeln vage Eindrücke in belastbare Zahlen, mit denen sich Investitionsentscheidungen tatsächlich begründen lassen.

   Read more

5. Eigene Tailwind CSS Plugins für Hyvä kompilieren

   02.01.2025

   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.

   Read more

6. Tailwind CSS Aspect Ratio: Responsive Media richtig einbetten

   02.01.2025

   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.

   Read more