Tag: Tailwind 4

1. Tailwind CSS pro Route aufteilen: Multi-Entry-Builds

   11.02.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.

   Read more

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

   11.02.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.

   Read more

3. Tailwind CSS mit Astro: Islands Architektur ohne Utility Explosion

   04.02.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.

   Read more

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

   03.02.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.

   Read more

5. Tailwind neben Legacy CSS: Schrittweise Migration ohne Big Bang

   03.02.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.

   Read more

6. Tailwind Klassennamenskonventionen für Teams

   30.01.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.

   Read more

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

   25.01.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.

   Read more

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

   25.01.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.

   Read more

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

   24.01.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.

   Read more

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

    20.01.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.

    Read more