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. Du lernst, Utility-First CSS so einzusetzen, dass Geschwindigkeit und Wartbarkeit zusammenpassen, statt sich gegenseitig auszubremsen. Im Kurs erstellst du wiederverwendbare Komponenten, definierst Design Tokens über tailwind.config.js und CSS Variables und setzt Dark Mode sowie States wie focus, group und peer konsistent um. Außerdem behandeln wir typische Praxisfragen: Wann @apply sinnvoll ist, wie Classnames lesbar bleiben, wie bestehendes CSS/SCSS schrittweise migriert wird und wie du Build und Auslieferung für Performance optimierst.

• Tailwind CSS verstehen und sauber starten
  • Utility-First: Denkmodell, Trade-offs, typische Stolperfallen
  • Setup mit Vite/Next.js: Build, Content-Scanning, Purge
  • Projektstruktur: Styles, Komponenten, Konventionen
  • DX-Boost: Prettier-Plugin, Class Sorting, Editor-Setup
• Layout, Responsive Design und Accessibility
  • Flexbox, Grid, Container Queries und Breakpoints
  • Spacing, Sizing, Typografie und Lesbarkeit
  • States: hover, focus, active, disabled, group/peer
  • Accessibility-Basics: Fokusführung, Kontrast, Semantik
• Designsystem mit Theme und Tokens
  • tailwind.config.js: colors, spacing, fontScale, shadows
  • CSS Variables als Tokens: Light/Dark Mode und Branding
  • Arbitrary values gezielt einsetzen, ohne Chaos
  • Namenskonventionen für skalierbare Teams
• Komponentenbau: wiederverwendbar und wartbar
  • Komposition statt Copy-Paste: Patterns für UI-Bausteine
  • @layer base/components/utilities sinnvoll nutzen
  • Re-Use mit @apply: wann ja, wann nein
  • Varianten und Zustände: Buttons, Inputs, Cards, Tables
• Animations, Interaktion und UI-Feinschliff
  • Transitions, keyframes und Motion-Reduktion
  • Micro-Interactions mit Tailwind Utilities
  • Dark Mode Strategien: class vs media
  • Performance: nur benötigte Styles ausliefern
• Produktionsbetrieb und Team-Workflow
  • Build-Optimierung, Bundle-Analyse, Caching
  • Code Reviews: className-Lesbarkeit und Standards
  • Migration von bestehendem CSS/SCSS zu Tailwind
  • Dokumentation: Komponenten-Katalog und Guidelines

• Grundkenntnisse in HTML und CSS (Box Model, Flexbox-Grundlagen)
• Basiswissen in JavaScript und einem Build-Workflow (z.B. npm) ist hilfreich

• Frontend-Entwicklerinnen und Frontend-Entwickler
• Webentwicklerinnen und Webentwickler mit React, Vue oder Angular
• UI-Engineer, Designsystem- und Component-Library-Teams
• UX-Designerinnen und UX-Designer mit technischem Bezug
• Alle, die Tailwind CSS sicher in Projekten einsetzen und im Team skalieren wollen

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