React - Design Systeme mit TailwindCSS und shadcn/ui

Ziele der Schulung

In dieser 2-tägigen Schulung "React - Design Systeme mit TailwindCSS und shadcn/ui" lernen Sie, wie Sie ein maßgeschneidertes Design-System für React-Anwendungen mit TailwindCSS und shadcn/ui entwickeln. Sie werden verstehen, wie shadcn/ui im Vergleich zu herkömmlichen Komponentenbibliotheken funktioniert und welche Flexibilität es für moderne React-Frameworks wie Next.js, Remix, Astro und Gatsby bietet. TailwindCSS wird als leistungsstarkes Utility-First-CSS-Framework eingeführt, das es ermöglicht, effiziente und flexible Benutzeroberflächen zu erstellen. Wir tauchen tief in die Grundlagen von TailwindCSS ein und erfahren, wie es mit shadcn/ui integriert werden kann, um ein vollständig anpassbares und erweiterbares Design-System zu erstellen.

Nach dem Seminar verfügen Sie über ein umfassendes Verständnis von TailwindCSS und shadcn/ui und sind in der Lage, ein maßgeschneidertes Design-System für React-Anwendungen zu entwickeln. Sie können shadcn/ui in verschiedene React-Frameworks integrieren, TailwindCSS effizient nutzen und eigene UI-Komponenten erstellen. Darüber hinaus haben Sie das Wissen, um das System mit Features wie Responsive Design, Dark Mode und Theming anzupassen.

Zielgruppe Seminar

• Webentwickler

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Teilnahme am Seminar Einführung in React oder vergleichbare Kenntnisse
• Erfahrung mit TailwindCSS ist empfehlenswert aber nicht unbedingt notwendig

Seminarinhalt

Einführung in shadcn/ui

• Unterschied zu Komponenten Libraries
• Unterstütze React Frameworks (Next.js, Remix, Astro, Gatsby)
• Basis Technologien
• radix UI

TailwindCSS Grundlagen

• Utility-First Grundlagen
• Modifiers: hover, focus
• Responsive Design
• Dark Mode
• Theme Anpassung
• Funktionen und Directives
• Installieren

Wichtige TailwindCSS Klassen

• Flexbox & Grid
• Spacing
• Sizing
• Typographie
• Hintergründe
• Ränder

Installation von shadcn/ui

• Installieren und Konfigurieren
• Theming
• Dark Mode

Grundlegende Konzepte von shadcn/ui

• Hinzufügen von neuen Komponenten zum Design System
• Verfügbare Komponenten
• Anlegen von Komponenten Varianten
• Anpassungen per Sprache mit v0 (LLM)

Open Badge für dieses Seminar - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erhalten Sie zusätzlich zu Ihrem Teilnehmerzertifikat ein digitales Open Badge (Zertifikat) – Ihren modernen Nachweis für erworbene Kompetenzen.

Ihr Open Badge ist jederzeit in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com-Konto verfügbar. Mit wenigen Klicks können Sie diesen digitalen Nachweis in sozialen Netzwerken teilen, um Ihre Expertise sichtbar zu machen und Ihr berufliches Profil gezielt zu stärken.

Übersicht: React Schulungen Portfolio

Mehr zu den Vorteilen von Badges

Seminare kurz vor der Durchführung