Seite 2 - Tailwind

Eine Pricing-Table ist meist der Moment, in dem sich Interesse in eine Kaufentscheidung verwandelt, entsprechend viel Sorgfalt verdient ihre Gestaltung. Zwischen hervorgehobenem Empfehlungstarif, konsistent gestylten Feature-Checkmarks und einem funktionierenden Monats-Jahres-Toggle steckt mehr Detailarbeit, als die meisten fertigen Pricing-Table-Vorlagen vermuten lassen.

Icons sind in jedem UI omnipräsent – und werden trotzdem häufig falsch eingesetzt. Zu groß, falsche Farbe, nicht barrierefrei, als PNG statt SVG. Dieser Guide zeigt, wie man Heroicons, Phosphor Icons und Inline-SVG mit Tailwind CSS v4 korrekt und performant einsetzt.

Die Standard Spacing Skala von Tailwind deckt viele Projekte gut ab, stößt aber bei eigenen Designsystemen schnell an Grenzen. Wer die Tailwind Spacing Skala mit @theme in Tailwind v4 gezielt erweitert, statt beliebige Pixelwerte einzustreuen, bekommt ein Abstandssystem, das über Buttons, Karten und ganze Seiten hinweg konsistent bleibt.

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.