{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "tailwind-basics", "title": "Tailwind: Grundlagen", "description": "Lerne, wie Tailwind CSS das Styling revolutioniert, indem es traditionelle CSS-Selektoren durch Utility-First-Klassen ersetzt. Verstehe die Philosophie hinter Utility-Klassen und wie sie häufige CSS-Probleme wie Spezifitätskonflikte und Wartungskomplexität lösen.", "mode": "tailwind", "difficulty": "beginner", "lessons": [ { "id": "bg-colors", "title": "Hintergrundfarben", "description": "Lerne, Hintergrundfarben mit Tailwind-Utilities anzuwenden.", "task": "Füge dem div einen blauen Hintergrund mit Tailwind-Klassen hinzu.", "previewHTML": "
Hallo Tailwind!
", "previewBaseCSS": "body { padding: 20px; font-family: sans-serif; }", "sandboxCSS": "", "initialCode": "", "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "bg-blue-500", "message": "Füge die bg-blue-500-Klasse für einen blauen Hintergrund hinzu." } ] }, { "id": "utility-first-philosophy", "title": "Den Utility-First-Ansatz verstehen", "description": "Tailwind CSS folgt einem Utility-First-Ansatz, bei dem du anstelle von benutzerdefinierten CSS-Klassen Designs mit kleinen, einzweckigen Utility-Klassen zusammenstellst. Im Gegensatz zu traditionellem CSS, wo du möglicherweise .card { background: white; padding: 1rem; border-radius: 0.5rem; } schreibst, bietet Tailwind vorgefertigte Utilities wie bg-white, p-4 und rounded.

Das bg-white-Utility setzt background-color: white, p-4 wendet padding: 1rem auf allen Seiten an, und rounded fügt border-radius: 0.25rem hinzu. Dieser Ansatz eliminiert die Notwendigkeit, zwischen HTML- und CSS-Dateien zu wechseln.", "task": "Erstelle einen weißen kartenähnlichen Container mit einem kleinen Schlagschatten, 1rem Padding und abgerundeten Ecken.", "previewHTML": "
\n
\n

Kartentitel

\n

Dies ist eine Karten-Komponente, die vollständig mit Utility-Klassen erstellt wurde!

\n
\n
", "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", "sandboxCSS": "/* Traditioneller CSS-Ansatz:\n.card {\n background-color: white;\n padding: 1rem;\n border-radius: 0.25rem;\n}\n*/", "initialCode": "", "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "bg-white", "message": "Füge bg-white hinzu, um die Hintergrundfarbe auf weiß zu setzen." }, { "type": "contains_class", "value": "p-4", "message": "Füge p-4 hinzu, um 1rem Padding auf allen Seiten anzuwenden." }, { "type": "contains_class", "value": "rounded", "message": "Füge rounded hinzu, um einen border-radius von 0.25rem anzuwenden." }, { "type": "contains_class", "value": "shadow-sm", "message": "Füge shadow-sm hinzu, um einen kleinen Schlagschatten anzuwenden." } ] }, { "id": "text-utilities", "title": "Textfarbe und Größen-Utilities", "description": "Tailwind bietet umfassende Text-Utilities für Typografie-Styling. Textfarben verwenden das Muster text-{farbe}-{abstufung}, wobei Farben rot, blau, grün usw. umfassen und Abstufungen von 50 (hellste) bis 950 (dunkelste) reichen. Zum Beispiel wendet text-blue-600 eine mittlere Blaufarbe an.

Textgrößen folgen dem Muster text-{größe} mit Optionen wie text-sm (0.875rem), text-base (1rem), text-lg (1.125rem), text-xl (1.25rem) und größeren Größen bis zu text-9xl. Schriftgewichte verwenden font-{gewicht} wie font-normal, font-medium, font-semibold und font-bold.", "task": "Style die Überschrift mit text-blue-600 für die Farbe, text-2xl für die Größe und font-bold für das Gewicht.", "previewHTML": "
\n

Willkommen bei Tailwind CSS

\n

Diese Überschrift demonstriert Text-Utilities in Aktion.

\n
", "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", "sandboxCSS": "/* Traditionelles CSS wäre:\nh1 {\n color: #2563eb;\n font-size: 1.5rem;\n font-weight: 700;\n}\n*/", "initialCode": "", "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "text-blue-600", "message": "Füge text-blue-600 hinzu, um den Text blau zu machen" }, { "type": "contains_class", "value": "text-2xl", "message": "Füge text-2xl hinzu, um die Schriftgröße auf 1.5rem zu erhöhen" }, { "type": "contains_class", "value": "font-bold", "message": "Füge font-bold hinzu, um den Text fett zu machen (font-weight: 700)" } ] }, { "id": "spacing-utilities", "title": "Abstände mit Padding und Margin", "description": "Tailwinds Abstands-Utilities folgen einem konsistenten Muster mit einer Abstandsskala, bei der jede Einheit 0.25rem (4px) darstellt. Padding-Utilities verwenden p-{größe} für alle Seiten, px-{größe} für horizontal (links/rechts), py-{größe} für vertikal (oben/unten), oder einzelne Seiten wie pt-{größe}, pr-{größe}, pb-{größe}, pl-{größe}.

Häufige Größen sind p-2 (0.5rem), p-4 (1rem), p-6 (1.5rem) und p-8 (2rem). Margin folgt demselben Muster, verwendet aber m- statt p-. Zum Beispiel zentriert mx-auto ein Element horizontal durch automatische linke und rechte Margins.", "task": "Style den Button mit px-6 für horizontales Padding, py-3 für vertikales Padding und mx-auto, um ihn zu zentrieren.", "previewHTML": "
\n \n
", "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", "sandboxCSS": "/* Traditionelles CSS-Äquivalent:\nbutton {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n margin-left: auto;\n margin-right: auto;\n}\n*/", "initialCode": "", "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "px-6", "message": "Füge px-6 für horizontales Padding hinzu (1.5rem links und rechts)" }, { "type": "contains_class", "value": "py-3", "message": "Füge py-3 für vertikales Padding hinzu (0.75rem oben und unten)" }, { "type": "contains_class", "value": "mx-auto", "message": "Füge mx-auto hinzu, um den Button horizontal zu zentrieren" } ] }, { "id": "responsive-design", "title": "Responsives Design mit Breakpoint-Präfixen", "description": "Tailwind verwendet einen Mobile-First-Ansatz für responsives Design mit Breakpoint-Präfixen. Die Basis-Utilities gelten für alle Bildschirmgrößen, dann fügst du Präfixe für größere Bildschirme hinzu: sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+) und 2xl: (1536px+).

Zum Beispiel macht text-base md:text-lg lg:text-xl Text auf Mobil normal groß, größer auf Tablets (md) und noch größer auf Desktop (lg). Jeder Breakpoint überschreibt den vorherigen, also bedeutet p-4 md:p-6 lg:p-8 1rem Padding auf Mobil, 1.5rem auf Tablets und 2rem auf Desktop.

Breiten-Utilities wie w-full (100% Breite), w-1/2 (50% Breite) oder feste Größen wie w-64 (16rem) können auch responsiv gemacht werden.", "task": "Mache die Box responsiv: w-full auf Mobil, md:w-1/2 auf Tablets und lg:w-1/3 auf Desktop. Füge auch responsive Textgrößen hinzu mit text-lg, md:text-xl und lg:text-2xl.", "previewHTML": "
\n
\n Responsive Box
\n Ändere die Browsergröße, um den Effekt zu sehen!\n
\n
", "previewBaseCSS": "body { font-family: sans-serif; margin: 0; }", "sandboxCSS": "/* Traditionelles CSS würde Media Queries erfordern:\n.responsive-box {\n width: 100%;\n font-size: 1.125rem;\n}\n@media (min-width: 768px) {\n .responsive-box {\n width: 50%;\n font-size: 1.25rem;\n }\n}\n@media (min-width: 1024px) {\n .responsive-box {\n width: 33.333333%;\n font-size: 1.5rem;\n }\n}\n*/", "initialCode": "", "previewContainer": "preview-area", "validations": [ { "type": "contains_class", "value": "w-full", "message": "Füge w-full für 100% Breite auf Mobil hinzu" }, { "type": "contains_class", "value": "md:w-1/2", "message": "Füge md:w-1/2 für 50% Breite auf Tablet und größer hinzu" }, { "type": "contains_class", "value": "lg:w-1/3", "message": "Füge lg:w-1/3 für 33.33% Breite auf Desktop und größer hinzu" }, { "type": "contains_class", "value": "text-lg", "message": "Füge text-lg für die Basis-Textgröße hinzu" }, { "type": "contains_class", "value": "md:text-xl", "message": "Füge md:text-xl für größeren Text auf Tablets hinzu" }, { "type": "contains_class", "value": "lg:text-2xl", "message": "Füge lg:text-2xl für noch größeren Text auf Desktop hinzu" } ] } ] }