Kurs · Schulung · Workshop

UI-Design mit Tailwind CSS und HeadlessUI

Utility-First-Webdesign mit TailwindCSS und Headless UI: schlanke, responsive Oberflächen wie bei OpenAI, GitHub und Shopify – in zwei Tagen praxisnah gebaut.

Meistere TailwindCSS und verbessere Deine Webdesign-Fähigkeiten in diesem umfassenden 2-tägigen Kurs. Du lernst, Deinen CSS-Workflow mit den Prinzipien von Utility-First zu optimieren, responsive und visuell ansprechende Designs zu erstellen und TailwindCSS an Deine spezifischen Bedürfnisse anzupassen. Tauche in fortgeschrittene Techniken wie die Optimierung für die Produktion und die Integration von Headless UI-Komponenten ein. Neben Tailwind entdeckst Du grundlegende Designprinzipien, einschliesslich visueller Hierarchie, effektiver Typografie und barrierefreier Designpraktiken. Praxisorientierte Übungen festigen Dein Verständnis und stellen sicher, dass Du diese Fähigkeiten sofort in Deinen Projekten anwenden kannst.

In-House Kurs

Massgeschneidert für Ihr Team.

Anfragen

Kein passender Termin?

Neuen öffentlichen Termin anfragen.

Termin anfragen

Trainer

Noah Bieler

Trainer

Stimmen unserer Teilnehmer:innen

Diese Kunden haben Kurse im gleichen Themen-Cluster bei uns gebucht.Mehr Kunden →

Inhalt

Einführung in TailwindCSS
- Grundlagen des Utility-First CSS-Frameworks
- Einrichtung und Konfiguration von TailwindCSS
- Kernfunktionen: Responsives Design, Layout, Typografie, Abstände und Farben
Fortgeschrittene TailwindCSS-Techniken
- Anpassung von Tailwind mit Konfigurationsdateien
- Optimierung für die Produktion: Bereinigung ungenutzter CSS
- Strategien, um wiederverwendbare Komponenten zu erstellen
- Integration von Headless UI für barrierefreie, ungestylte Komponenten
Grundlagen des Designs
- Visuelle Hierarchie und Rastersysteme
- Effektiver Einsatz von Farben und Typografie
- Erstellung intuitiver, barrierefreier Designs mit TailwindCSS und Headless UI
Praktische Übungen
- Umsetzung von Designkonzepten mit TailwindCSS
- Peer Reviews von Designs

Der effektive Kursinhalt kann, abhängig von Trainer, Durchführung, Dauer und Konstellation der Teilnehmer:innen, von obigen Angaben abweichen.

Ziel

Dieser Kurs zielt darauf ab, Webentwickler mit den Fähigkeiten auszustatten, TailwindCSS effizient zu nutzen, um responsive, skalierbare und visuell ansprechende Websites sowie Webanwendungen zu erstellen. Du lernst sowohl grundlegende als auch fortgeschrittene Techniken, von der Einrichtung von TailwindCSS bis zur Optimierung für die Produktion. Darüber hinaus behandelt der Kurs grundlegende Designprinzipien, um sicherzustellen, dass Du intuitive und barrierefreie Benutzeroberflächen erstellen kannst. Am Ende des Kurses wirst Du in der Lage sein, diese Werkzeuge und Konzepte sicher in Deinen eigenen Projekten anzuwenden.

Dauer

2 Tage

Form

Eine ausgewogene Mischung aus Konzepten, Live-Coding und kollaborativen Designübungen. Der Kurs konzentriert sich auf die praktische Anwendung von TailwindCSS und grundlegenden Designprinzipien, um sicherzustellen, dass Du schnell ausgereifte Webprojekte und Komponenten erstellen kannst.

Zielgruppe

Dieser Kurs richtet sich an Webentwickler, die ihre Fähigkeit zur Erstellung von professionellen, marktreifen Tools und Websites verbessern möchten. Er ist ideal für diejenigen, die ihren CSS-Workflow optimieren, ihre Designfähigkeiten verbessern und sicherstellen möchten, dass ihre Projekte nicht nur funktional, sondern auch visuell ansprechend und benutzerfreundlich sind.

Voraussetzungen

Teilnehmer sollten ein grundlegendes Verständnis von CSS und allgemeiner Webentwicklung haben.

Vorbereitung

Jeder Teilnehmer erhält nach der Anmeldung einen Fragebogen und eine Installationsanleitung zugestellt. Passend zu den Antworten senden wir ein individuelles Feedback.

In-House Kurs anfragen

Öffentlichen Termin anfragen

Kein passender öffentlicher Termin dabei? Trag dich unverbindlich ein – sobald genug Interesse besteht, planen wir einen neuen öffentlichen Termin und informieren dich zuerst.

Mehr über Tailwind CSS und HeadlessUI

Tailwind CSS ist ein Utility-First CSS-Framework, das Entwicklern ermöglicht, direkt im HTML-Markup zu stylen, ohne eigene CSS-Klassen schreiben zu müssen. Durch den einzigartigen Ansatz kleiner, wiederverwendbarer Utility-Klassen entstehen konsistente und hochperformante Oberflächen. Headless UI ergänzt Tailwind um barrierefreie, vollständig unstyled Komponenten wie Dialoge, Dropdowns und Tabs, die frei gestaltet werden können.

Weitere Ressourcen:

History

Tailwind CSS wurde 2017 von Adam Wathan gemeinsam mit Jonathan Reinink, David Hemphill und Steve Schoger entwickelt. Wathan war zuvor frustriert von den Schwächen komponentenbasierter CSS-Ansätze und veröffentlichte den Artikel "CSS Utility Classes and 'Separation of Concerns'", der die Grundphilosophie von Tailwind beschreibt. Version 1.0 erschien 2019, gefolgt von dem bahnbrechenden Tailwind CSS v2.0 (2020) mit JIT-Compiler und erweiterter Farbpalette.

Mit Tailwind CSS v3.0 (2021) wurde der Just-in-Time Compiler standardmässig aktiviert, was die Build-Zeiten drastisch reduzierte. Tailwind CSS v4.0 (2025) brachte eine komplett neu geschriebene Engine auf CSS-Basis. Das Framework wird heute von grossen Unternehmen wie GitHub, Shopify, OpenAI und NASA eingesetzt und ist eines der meistgenutzten CSS-Frameworks weltweit.