Tailwind

AI generated

Pricing-Table-Muster mit Tailwind: Tarife klar vergleichbar machen

09.04.2026

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.

AI generated

Tailwind Icons: Heroicons, Phosphor und Inline-SVG richtig einsetzen

07.04.2026

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.

AI generated

Tailwind Spacing Skala anpassen: Strategien für konsistente Abstände

29.03.2026

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.

AI generated

Farbkontrast-Audit für Tailwind-Paletten: WCAG-konforme Farben systematisch prüfen

21.03.2026

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.

AI generated

Tailwind CSS Multi-Brand-Theming: ein Codebase, mehrere Marken

14.03.2026

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.

AI generated

Content-Scanning Fallstricke: Headless-CMS, MDX & Co.

11.03.2026

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.

AI generated

Tailwind CSS und Alpine.js: fortgeschrittene Kombinationsmuster

10.03.2026

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.

AI generated

Modale Dialoge mit dem nativen dialog-Element stylen

08.03.2026

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.

AI generated

Tailwind CSS mit Svelte und SvelteKit einrichten

17.02.2026

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.

AI generated

Tailwind Masonry Layout: Pinterest-Grid ohne JavaScript-Bibliothek

16.02.2026

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.