Tailwind & shadcn/ui in der Praxis
14 Beiträge in dieser Serie
Ein moderner UI-Pfad für Tailwind-Setup, Design Tokens, shadcn/ui-Komponenten, Theming, Forms und Projektstruktur.
Tailwind v4 + Vite: 5-Minuten-Setup-Vorlage und Verzeichnisstruktur
Tailwind CSS v4 mit Vite von Grund auf einrichten – komplette 5-Minuten-Vorlage und empfohlene Verzeichnisstruktur. Inklusive v3-zu-v4-Migrations-Checkliste für ein modernes Frontend-Projekt.
Tailwind CSS v4 – Neue Features: Performance, Konfiguration und Migrationsleitfaden
Tailwind CSS v4 im Detail: Oxide-Engine-Performance, CSS-first-Konfiguration, Zero-Setup-Installation und Breaking Changes – mit vollständiger Migrations-Checkliste und Schritt-für-Schritt-Anleitung
Was ist shadcn/ui? Vergleich und Auswahl: shadcn/ui vs. MUI, Chakra & Ant Design
Tiefgehender Vergleich von shadcn/ui, Material-UI, Chakra UI und Ant Design – sieben Dimensionen von Bundle-Größe über Anpassbarkeit, Developer Experience und Barrierefreiheit bis zur Entscheidungshilfe
shadcn/ui Installation und Theme-Anpassung: Der vollständige Leitfaden (inkl. CSS-Variablen)
Ausführliche Anleitung zur Installation und Theme-Anpassung von shadcn/ui: CSS-Variablen, OKLCH-Farben und Dark-Mode-Umschaltung. Best Practices für markenspezifisches UI-Design – in 5 Minuten startklar.
Admin-Skeleton mit shadcn/ui: Sidebar + Layout – Best Practices
Best Practices für shadcn/ui Sidebar und Next.js Layout: von Komponentenarchitektur über responsives Design bis RBAC – Schritt für Schritt ein skalierbares Admin-Skeleton mit vollständigen Codebeispielen
Tailwind Responsive Layout in der Praxis: Container Queries und Breakpoint-Strategie
Container Queries und Breakpoint-Strategien in Tailwind CSS – vom Viewport zum Container: responsives Design auf Komponentenebene meistern.
Tailwind Dark Mode: class vs. data-theme im Vergleich
Systematischer Vergleich der Tailwind-CSS-Dark-Mode-Strategien class und data-theme – Implementierung, Konfiguration, Framework-Integration und die passende Wahl für Ihr Projekt
shadcn/ui Kompositionsmuster: Best Practices für mehrere Komponenten
Lernen Sie die Best Practices für shadcn/ui-Kompositionsmuster – Dialog+Form, DataTable+DropdownMenu und mehr. Mit Context-Muster, State-Management und Performance-Optimierung.
shadcn/ui und Radix: Barrierefreiheit bei eigenen Komponenten bewahren
shadcn/ui basiert auf Radix Primitives – wie bleibt Barrierefreiheit beim Anpassen erhalten? asChild, Fokusmanagement und ARIA-Vererbung, damit Tastatur-Navigation nicht ausfällt.
Dialog, Sheet, Popover: Barrierefreiheit und Fokusmanagement bei Overlay-Komponenten
Tiefgehende Analyse der Barrierefreiheit und des Fokusmanagements bei shadcn/ui Dialog, Sheet und Popover – WCAG-Standards, ARIA-Attribute, Tastaturnavigation, Fokusfallen und vollständige Codebeispiele
Tailwind Performance-Optimierung: JIT, content-Konfiguration und Produktionsgröße
JIT-Modus, content-Best Practices und vierstufige Produktionsoptimierung für Tailwind CSS – mit Praxisbeispielen und Tailwind-v4-Oxide-Analyse
Astro + Tailwind: Island-Komponenten und globale Styles ohne Konflikte
CSS-Konflikte mit Tailwind unter Astros Islands-Architektur? astro-island/astro-slot, Tailwind v4 mit @tailwindcss/vite und vier typische Stilfallen – mit Praxislösungen.
React Compiler + shadcn/ui: Frontend-Entwicklung im Zeitalter der automatischen Optimierung
React Compiler in shadcn/ui-Projekten: Aktivierung, Praxiserfahrung, Migrationshinweise und Performance-Vergleich – vom manuellen zum automatischen Optimieren
shadcn/ui Troubleshooting: Stilkonflikte, fehlende Komponenten, TypeScript-Fehler
Systematische Übersicht der drei häufigsten shadcn/ui-Probleme mit detaillierten Schritten zur Fehlersuche und Lösungen für Stilkonflikte, fehlgeschlagene Komponenten-Renderings und TypeScript-Typfehler
