Tailwind CSS Framework Kurs

Lektion 1 • Installation und Konfiguration von Tailwind

Führt durch die CLI-Installation, die PostCSS-Integration und die CDN-Nutzung. Die Teilnehmer erstellen eine funktionierende lokale Umgebung, die für alle nachfolgenden Übungen bereit ist.

Lektion 2 • Die Kernphilosophie von Tailwind CSS

Untersucht die Designbeschränkungen von Tailwind, die voreingestellten Standardwerte und das auf Einschränkungen basierende Designsystem. Verbindet die Philosophie mit den praktischen Produktivitätsvorteilen, die die Teilnehmer erleben werden.

Lektion 3 • Was ist Utility-First-CSS?

Definiert Utility-First-Styling und grenzt es von komponentenbasierten Frameworks ab. Legt die konzeptionelle Grundlage für jede Tailwind-Entscheidung, die im Kurs getroffen wird.

Lektion 4 • Die Tailwind-Konfigurationsdatei

Stellt den Aufbau von tailwind.config.js, die Inhaltspfade und die Theme-Schlüssel vor. Bereitet die Teilnehmer darauf vor, Tailwind anzupassen, ohne seine Standardeinstellungen zu beeinträchtigen.

Lektion 1 • Utilities für Breite, Höhe und Größenanpassung

Untersucht Klassen für feste, bruchteilige, viewportbezogene und inhaltsbasierte Größen. Die Teilnehmer dimensionieren Container und Bilder in verschiedenen Layout-Kontexten korrekt.

Lektion 2 • Utilities für Anzeige und Sichtbarkeit

Behandelt block-, inline-, flex-, grid-, hidden- und Sichtbarkeitsklassen. Die Teilnehmer steuern die Elementdarstellung und zugänglichkeitssichere Verstecktechniken.

Lektion 3 • Utilities für Außen- und Innenabstände

Lehrt gerichtete Außen- und Innenabstandsklassen, einschließlich Kurzschreibweisen und Achsenvarianten. Die Teilnehmer wenden Abstände präzise auf echte UI-Elemente an.

Lektion 4 • Die Abstandsskala verstehen

Behandelt die standardmäßige rem-basierte Abstandsskala von Tailwind und wie numerische Token Pixelwerten zugeordnet werden. Vermittelt das mentale Modell, das für konsistente Entscheidungen zu Außen- und Innenabständen erforderlich ist.

Lektion 1 • Grundlagen der Tailwind-Farbpalette

Stellt die Standard-Palettenstruktur, die Farbtonnummerierung und semantische Farbrichter vor. Die Teilnehmer wählen barrierefreie Farbpaare mithilfe der integrierten Skala von Tailwind aus.

Lektion 2 • Schriftgröße und Zeilenhöhe

Ordnet die Textgrößenskala von Tailwind typografischen Rollen zu und erklärt die zugehörigen Standard-Zeilenhöhen. Die Teilnehmer etablieren eine klare visuelle Hierarchie in jeder Benutzeroberfläche.

Lektion 3 • Anpassen und Erweitern von Farben

Zeigt das Hinzufügen von Markenfarben, CSS-Variablen und semantischen Aliasen in der Konfiguration. Die Teilnehmer pflegen ein skalierbares Farbsystem über große Projekte hinweg.

Lektion 4 • Buchstabenabstand und Textausrichtung

Lehrt Utilities für Zeichenabstand, Textausrichtung und Texttransformation zur feinen typografischen Steuerung. Die Teilnehmer optimieren Überschriften und Mengentexte nach professionellen Standards.

Lektion 1 • Erstellen echter Flex-Komponenten

Wendet alle Flex-Utilities an, um eine Navigationsleiste, ein Medienobjekt und ein Footer-Layout zu erstellen. Die Teilnehmer festigen ihr Flex-Wissen durch praktische Komponentenkonstruktion.

Lektion 2 • Flex-Grow, Flex-Shrink und Flex-Basis

Erklärt die Utilities Flex-Grow, Flex-Shrink und Flex-Basis sowie deren Zusammenspiel. Die Teilnehmer erstellen flexible Spalten, deren Größe sich bei unterschiedlichen Inhaltslasten vorhersehbar anpasst.

Lektion 3 • Utilities für Reihenfolge und Selbstausrichtung

Lehrt Ordnungsklassen und Überschreibungen der Einzelelementausrichtung für komplexe Flex-Anordnungen. Die Teilnehmer ordnen visuelle Elemente neu an, ohne die DOM-Struktur zu ändern.

Lektion 4 • Ausrichtung und Rechtfertigung

Behandelt die Utilities justify-content, align-items, align-self und align-content. Die Teilnehmer zentrieren, verteilen und strecken Elemente präzise in jedem Flex-Layout.

Lektion 1 • Ausrichtung innerhalb von Grid

Wendet justify-items, align-items, justify-self und align-self innerhalb des Grid-Kontextes an. Die Teilnehmer positionieren Zellinhalte unabhängig von der Spur-Größenanpassung.

Lektion 2 • Einrichtung des Grid-Containers

Aktiviert den Grid-Kontext und definiert Spalten- und Zeilenvorlagen mit Tailwind-Klassen. Die Teilnehmer verstehen, wie Vorlagendefinitionen die Platzierung aller Kindelemente steuern.

Lektion 3 • Erstellen echter Grid-Layouts

Konstruiert eine Dashboard-Hülle, eine Bildergalerie und ein redaktionelles Seitenlayout mit Grid-Utilities. Die Teilnehmer wenden ihr Grid-Wissen auf Layouts in Produktionsqualität an.

Lektion 4 • Spalten- und Zeilenübergreifende Elemente

Behandelt die Utilities col-span, row-span und full-span für die Platzierung von Elementen über mehrere Spuren hinweg. Die Teilnehmer erstellen asymmetrische Layouts, die das gleichmäßige Rastermuster durchbrechen.

Lektion 1 • Responsiver Layout-Wechsel

Wechselt zwischen Flex- und Grid-Layouts bei verschiedenen Breakpoints für eine adaptive Struktur. Die Teilnehmer erstellen Komponenten, die sich ohne JavaScript umstrukturieren.

Lektion 2 • Breakpoint-Präfixe von Tailwind

Behandelt die Präfixe sm, md, lg, xl und 2xl sowie deren standardmäßige Pixelgrenzen. Die Teilnehmer wenden Breakpoint-Präfixe selbstbewusst auf jede Utility-Klasse an.

Lektion 3 • Mobile-First-Designprinzipien

Etabliert Mobile-First-Denken und erklärt, warum die Breakpoints von Tailwind auf min-width basieren. Die Teilnehmer richten ihre Designentscheidungen neu aus, um vom kleinsten Viewport aus zu beginnen.

Lektion 4 • Benutzerdefinierte Breakpoints und Screens-Konfiguration

Fügt projektspezifische Breakpoints hinzu und überschreibt Standardwerte im screens-Konfigurationsschlüssel. Die Teilnehmer passen das responsive System von Tailwind an jede Designspezifikation an.

Lektion 1 • Group- und Peer-Varianten

Lehrt Muster für group-hover und peer-checked für vom Eltern- bzw. Geschwisterelement ausgelöste Stile. Die Teilnehmer erstellen Dropdown-Menüs und benutzerdefinierte Kontrollkästchen ohne JavaScript.

Lektion 2 • Varianten für Formularzustände

Wendet die Varianten required, invalid, valid und checked an, um Zustände der Formularvalidierung zu gestalten. Die Teilnehmer geben klares visuelles Feedback für Benutzereingaben, ohne benutzerdefiniertes CSS.

Lektion 3 • Utilities für Übergänge und Animationen

Fügt sanfte Übergänge und Keyframe-Animationen mit den integrierten Utility-Klassen von Tailwind hinzu. Die Teilnehmer verbessern die Interaktivität mit performanten, GPU-freundlichen Bewegungen.

Lektion 4 • Aktive, besuchte und deaktivierte Zustände

Behandelt die Varianten active, visited, disabled und placeholder für vollständiges Formular- und Link-Styling. Die Teilnehmer handhaben alle interaktiven Zustände in einem einzigen Utility-Class-Workflow.

Lektion 1 • Beliebige Werte und CSS-Variablen

Verwendet die Klammernotation für einmalige Werte und integriert benutzerdefinierte CSS-Eigenschaften in Utilities. Die Teilnehmer verlassen die Standardskala, wenn die Designspezifikationen Präzision erfordern.

Lektion 2 • Leistung und Bundle-Optimierung

Prüft die Größe der CSS-Ausgabe, konfiguriert Inhaltspfade präzise und wendet Safelist-Muster an. Die Teilnehmer liefern das kleinstmögliche Stylesheet, ohne auf die Nutzung dynamischer Klassen zu verzichten.

Lektion 3 • Implementierung des Dark Mode

Konfiguriert den klassenbasierten und medienbasierten Dark Mode und wendet Dark-Varianten in der gesamten Benutzeroberfläche an. Die Teilnehmer liefern vollständige helle und dunkle Themes aus einem einzigen Stylesheet.

Lektion 4 • Schreiben benutzerdefinierter Tailwind-Plugins

Erstellt benutzerdefinierte Utility-, Komponenten- und Varianten-Plugins mit der Plugin-API von Tailwind. Die Teilnehmer erweitern die Fähigkeiten von Tailwind, um den individuellen Anforderungen jedes Projekts gerecht zu werden.