Seite 12 - Tailwind 4

AI generated

Barrierefreie Tooltips und Popover-Muster mit Tailwind CSS

Maxim Mironjuk - Januar 19, 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.

JavaScript Tailwind

AI generated

Tailwind CSS mit htmx: Hypermedia-Anwendungen stylen

Maxim Mironjuk - Januar 15, 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.

JavaScript Tailwind

AI generated

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

Maxim Mironjuk - Januar 11, 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.

Tailwind

AI generated

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

Maxim Mironjuk - Januar 05, 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.

Tailwind Hyvä

AI generated

Eigene Tailwind CSS Plugins für Hyvä kompilieren

Maxim Mironjuk - Januar 02, 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.

Tailwind

AI generated

Tailwind CSS Aspect Ratio: Responsive Media richtig einbetten

Maxim Mironjuk - Januar 02, 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.