Seite 2 - Tailwind 4

Eine schöne Farbpalette ist noch keine lesbare Farbpalette. Ein Farbkontrast-Audit deckt auf, welche Text-Hintergrund-Kombinationen einer Tailwind CSS Palette WCAG AA tatsächlich erfüllen, bevor sie im Design System zur Falle für Nutzer mit eingeschränktem Sehvermögen werden.

White-Label-Produkte, Multi-Tenant-SaaS und Agenturen mit vielen Kunden stehen vor derselben Herausforderung: Wie bedient man mehrere Marken aus einem einzigen Codebase, ohne Klassennamen zu duplizieren und ohne den Build-Prozess zu verkomplizieren? Tailwind CSS Multi-Brand-Theming mit @theme und CSS Custom Properties ist die Antwort.

Klassennamen, die aus einem Headless-CMS-Feld, einer MDX-Datei oder einer npm-Komponentenbibliothek stammen, liegen oft außerhalb der Reichweite des Tailwind-Scanners. Wer nicht versteht, warum Content-Scanning genau dort scheitert, verliert Zeit mit rätselhaftem fehlendem CSS, obwohl die Klasse im Markup sichtbar dasteht.

Ein einfaches x-show mit zwei Toggle-Klassen ist der Einstieg, aber Alpine.js und Tailwind CSS können deutlich mehr: Klassenobjekte über x-bind, mehrstufige x-transition-Phasen, verschachtelte Komponenten mit x-teleport und globales Theming über Alpine.store. Dieser Artikel zeigt Muster, die über das Grundlagen-Tutorial hinausgehen und in echten Produktionsanwendungen tatsächlich gebraucht werden.

Das dialog-Element bringt Fokus-Management, Escape-Handling und einen echten Backdrop direkt im Browser mit. Mit Tailwind CSS und ein wenig Alpine.js wird daraus ein produktionsreifes Modal-System, das ohne Fokus-Traps aus JavaScript-Bibliotheken auskommt und trotzdem vollständig zugänglich bleibt.

Svelte kompiliert Komponenten weg, statt sie zur Laufzeit zu interpretieren, und genau dieses Prinzip lässt sich auf das Styling übertragen, wenn Tailwind CSS über Vite korrekt eingebunden ist. Dieser Artikel zeigt das Setup in SvelteKit, das Zusammenspiel von Scoped Styles und Utility-Klassen, Reactive Statements für Klassenlogik und die serverseitigen Rendering-Fallstricke, die bei SvelteKit besonders häufig auftreten.

Ein Masonry Layout mit Tailwind CSS zu bauen ist einfacher als gedacht: CSS columns löst 80% der Fälle ohne eine Zeile JavaScript. Für die restlichen 20% – Reihensortierung, dynamische Inhalte und Filterung – liefert Alpine.js die nötige Logik ohne externe Abhängigkeiten.

Ein inkonsistentes Button-System ist einer der häufigsten Wartungsprobleme in Tailwind-Projekten. Wer Buttons ad hoc zusammenstellt, baut über Monate hinweg eine Sammlung kaum unterscheidbarer Klassen-Kombinationen auf. Dieses Tutorial zeigt, wie man mit Tailwind CSS eine skalierbare Variantenbibliothek entwirft – von Primary bis Loading-State.

Wer Inhalte für Screenreader bereitstellen will, ohne sie visuell anzuzeigen, greift oft reflexartig zu display:none. Das entfernt den Text aber komplett aus dem Accessibility Tree. Das sr-only Utility in Tailwind CSS löst genau dieses Problem: visuell unsichtbar, für assistive Technologien vollständig lesbar. Dieser Artikel zeigt, wie sr-only technisch funktioniert und wo es in echten Projekten den Unterschied macht.

Tailwind CSS und React zusammen zu verwenden, ist intuitiv – bis Klassen-Komposition, bedingte Styles und Varianten-Systeme komplex werden. Dieser Artikel zeigt die etablierten Best Practices: clsx für bedingte Klassen, den cn-Helper für Merge-sichere Komposition und cva für typsichere Varianten-Systeme in React-Komponenten.