Bestellung
Wenn Sie an diesem Seminar teilnehmen wollen, füllen Sie folgendes Formular aus.Die mit * gekennzeichneten Felder müssen ausgefüllt werden.
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