Tailwind CSS: Der Komplettkurs

Tailwind CSS verstehen und sauber starten

• Utility-First-Denkmodell und Trade-offs
• Setup mit Vite und Frameworks
• CSS-first-Konfiguration mit @import
• Automatische Klassenerkennung und @source
• Editor-Setup und Class Sorting

Layout, Responsive Design und Accessibility

• Flexbox, Grid und Container Queries
• Breakpoints und responsive Varianten
• Spacing, Sizing und Typografie
• States mit hover, focus, active
• Fokusführung, Kontrast und Semantik

Designsystem mit Theme und Tokens

• Theme-Variablen mit @theme
• Design Tokens als CSS Variables
• Light- und Dark-Mode-Strategien
• Branding und skalierbare Namenskonventionen
• Arbitrary Values mit klaren Regeln

Komponentenbau und Wiederverwendung

• Komposition statt Copy-Paste
• @layer für eigene Styles
• @apply gezielt und sparsam einsetzen
• Varianten für Buttons und Inputs
• Patterns für Cards und Tables

Interaktion, Animation und UI-Feinschliff

• Transitions und Keyframes
• Micro-Interactions mit Utilities
• Motion-Reduktion und Nutzerpräferenzen
• Classname-Lesbarkeit in Komponenten
• Konflikte in Utility-Kombinationen

Produktion, Migration und Team-Workflow

• Build-Optimierung und CSS-Ausgabe
• Safelisting mit @source inline
• Migration von CSS/SCSS
• Review-Standards für Teams
• Komponenten-Katalog und Guidelines

• Solide Grundkenntnisse in HTML und CSS, insbesondere Box Model, Selektoren und Flexbox
• Erfahrung mit Responsive Design oder vorheriger Besuch einer Schulung wie CSS Aufbaukurs
• Basiswissen in JavaScript, npm und modernen Build-Workflows
• Grundverständnis für Komponenten in React, Vue, Angular, Svelte oder vergleichbaren Frameworks hilfreich

• Frontend-Entwicklerinnen und Frontend-Entwickler mit HTML-, CSS- und JavaScript-Erfahrung
• Webentwicklerinnen und Webentwickler in React-, Vue-, Angular-, Svelte- oder Next.js-Projekten
• UI-Engineers sowie Designsystem- und Component-Library-Teams
• UX-Designerinnen und UX-Designer mit technischem Bezug zu Layout, Tokens und Komponenten