Seite 11 - Tailwind 4

AI generated

Tailwind CSS pro Route aufteilen: Multi-Entry-Builds

Maxim Mironjuk - Februar 11, 2025

Ein einziges globales Tailwind-CSS-Bundle für alle Seiten eines großen Projekts bedeutet, dass jede Route Styles lädt, die sie gar nicht braucht. Mit Multi-Entry-Builds, gezieltem Code-Splitting und Critical CSS lässt sich Tailwind CSS pro Seite oder Route so aufteilen, dass jede Route nur das CSS ausliefert, das sie tatsächlich verwendet.

Tailwind

AI generated

Tailwind Layer: @layer base, components und utilities erklärt

Maxim Mironjuk - Februar 11, 2025

CSS-Spezifitätsprobleme entstehen fast immer durch unklare Kaskaden-Reihenfolge. Tailwinds @layer-System – mit base, components und utilities – löst dieses Problem strukturell: Jede Layer-Ebene hat eine feste Position in der Kaskade, und Overrides funktionieren deterministisch statt durch Spezifitäts-Hacks.

JavaScript Tailwind

AI generated

Tailwind CSS mit Astro: Islands Architektur ohne Utility Explosion

Maxim Mironjuk - Februar 04, 2025

Astro liefert standardmäßig kein JavaScript aus und rendert Seiten als statisches HTML, Tailwind CSS liefert dazu ein Utility System, das genau auf diese Architektur passt. Wer Tailwind CSS mit Astro kombiniert, bekommt kleine CSS Bundles, klar abgegrenzte interaktive Inseln und ein Build, das sich fast von selbst optimiert, wenn man die Islands Architektur richtig versteht.

Tailwind

AI generated

Tailwind group und peer: Selektoren für interaktive UI ohne JavaScript

Maxim Mironjuk - Februar 03, 2025

Hover-Kaskaden, Formularvalidierung und komplexe UI-Zustände – mit Tailwinds group und peer Modifikatoren lassen sich Interaktionen beschreiben, für die andere Projekte Alpine.js oder React anwerfen. Das Ergebnis: schlankes HTML, kein JavaScript-Overhead.

Tailwind CSS

AI generated

Tailwind neben Legacy CSS: Schrittweise Migration ohne Big Bang

Maxim Mironjuk - Februar 03, 2025

Nicht jedes Projekt kann und muss auf einen Schlag komplett auf Tailwind umgestellt werden. Tailwind neben Legacy CSS zu betreiben ist eine bewusste Zwischenlösung, die neue Features direkt mit Utilities baut, während bestehendes, handgeschriebenes CSS unverändert weiterläuft, bis es Komponente für Komponente abgelöst wird.

Tailwind

AI generated

Tailwind Klassennamenskonventionen für Teams

Maxim Mironjuk - Januar 30, 2025

Ohne Namenskonvention schreibt jeder Entwickler Utility-Klassen in einer anderen Reihenfolge, benennt Custom-Utilities unterschiedlich und macht Pull Requests unnötig schwer lesbar. Eine gemeinsame Konvention für Klassenreihenfolge, Custom-Namen und Präfixe verwandelt Tailwind-Markup von einer Zeichenkette in lesbaren, überprüfbaren Code.

Tailwind

AI generated

Tailwind CSS clip-path: Kreative Formen und Übergänge

Maxim Mironjuk - Januar 25, 2025

Rechtecke und Border-Radius sind nicht die einzigen Formen im Tailwind-Designraum. Mit clip-path lassen sich Polygone, Kreise, Schrägschnitte und komplexe Masken direkt in CSS definieren – ohne SVG-Wrapper, ohne JavaScript, und mit Animations-Support durch einfache CSS-Transitions.

Tailwind Barrierefreiheit

AI generated

ARIA Live Regions für dynamische Inhalte: Screenreader-Ankündigungen mit Tailwind CSS steuern

Maxim Mironjuk - Januar 25, 2025

Ein Toast, der lautlos erscheint und wieder verschwindet, existiert für Screenreader Nutzer schlicht nicht. ARIA Live Regions lösen dieses Problem: Mit aria-live, role status und aria-atomic werden dynamische Inhalte in Tailwind CSS Anwendungen zuverlässig angekündigt, ohne den Lesefluss zu stören.

Tailwind

AI generated

Tailwind CSS vs. Bootstrap 5: welches Framework für welches Projekt?

Maxim Mironjuk - Januar 24, 2025

Tailwind CSS und Bootstrap 5 verfolgen fundamental unterschiedliche Philosophien. Welches passt zu eurem Projekt, Team und Wartungsaufwand? Dieser Vergleich zeigt die echten Unterschiede – ohne Marketing, mit konkreten Code-Gegenüberstellungen.

Tailwind Barrierefreiheit

AI generated

Fokusring-Design für Barrierefreiheit: WCAG-konforme Fokus-Indikatoren mit Tailwind CSS

Maxim Mironjuk - Januar 20, 2025

Ein Fokusring ist für Tastaturnutzer das, was der Mauszeiger für alle anderen ist: die einzige Möglichkeit zu sehen, wo man sich gerade befindet. Mit den ring-* Utilities, focus-visible und ring-offset baut Tailwind CSS Fokus-Indikatoren, die sichtbar bleiben, statt sie mit outline-none unsichtbar zu machen.