Seminarkatalog

In dieser Tailwind CSS Schulung baust du ein belastbares UI-Fundament, das in echten Projekten funktioniert: von sauberem Setup über Responsive Design bis zu einem teamfähigen Designsystem. Der Kurs orientiert sich an aktuellen Tailwind-CSS-Workflows mit CSS-first-Konfiguration, Theme-Variablen, automatischer Klassenerkennung und moderner Build-Integration, ohne typische Anforderungen aus bestehenden Projekten auszublenden.

Du lernst, Utility-First CSS so einzusetzen, dass Entwicklungsgeschwindigkeit und Wartbarkeit zusammenpassen, statt sich gegenseitig auszubremsen. Im Kurs entstehen wiederverwendbare Komponenten, konsistente Varianten, Design Tokens über @theme und CSS Variables sowie Dark Mode und States wie focus, group und peer. JavaScript-Konfiguration mit tailwind.config.js wird dort eingeordnet, wo sie in bestehenden Projekten oder bei Migrationen weiterhin relevant ist.

Außerdem behandeln wir typische Praxisfragen: Wann @apply sinnvoll ist, wie Classnames lesbar bleiben, wie bestehendes CSS/SCSS schrittweise migriert wird und wie Build und Auslieferung für Performance optimiert werden. Wer parallel komponentenbasierte CSS-Frameworks einordnen möchte, findet im Bootstrap 5 Kompaktkurs einen sinnvollen Vergleichsansatz.

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

Lernformate

Unsere Seminare bieten dir maximale Flexibilität: Du kannst zwischen Live-Online und Vor Ort in unseren modernen Schulungszentren im D-A-CH Raum wählen. Beide Formate garantieren dir die gleiche hohe Qualität und interaktive Lernerfahrung.

Schulungsarten

Wir bieten dir verschiedene Schulungsarten: Offene Seminare, Firmenseminare für Teams und Inhouse-Schulungen direkt bei dir vor Ort. So findest du genau das Format, das zu deinen Bedürfnissen passt.

Uhrzeiten

9:00-16:00 Uhr

Aktuelle Software

In unseren offenen Kursen arbeiten wir mit der aktuellsten Software-Version. So lernst du direkt mit den Tools und Features, die du auch in deinem Arbeitsalltag verwendest - praxisnah und zukunftsorientiert. Bei Inhouse- und Firmenschulungen bestimmt ihr die Version.

D