## Aufgabe
Verwenden Sie die Tailwind CSS-Dienstprogramme für Typografie, um eine Textkomponente mit folgenden Spezifikationen zu erstellen:
1. Eine Überschrift (`h1`) mit:
   - Schriftgröße 4xl;
   - Fettem Schriftschnitt;
   - Normaler Zeilenhöhe.
2. Eine Unterüberschrift (`h2`) mit:
   - Schriftgröße 2xl;
   - Halbfettem Schriftschnitt;
   - Enger Zeilenhöhe.
3. Ein Absatz (`p`) mit:
   - Schriftgröße base;
   - Normalem Schriftschnitt;
   - Entspannter Zeilenhöhe.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGNsYXNzPSJ0ZXh0LV9fX19fIGZvbnQtX19fX18gbGVhZGluZy1fX19fXyI+TWFpbiBIZWFkaW5nPC9oMT4KICAgIDxoMiBjbGFzcz0iX19fX18tX19fX18gX19fX18tX19fX18gX19fX18tX19fX18iPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9Il9fX19fIF9fX19fIF9fX19fIj4KICAgICAgVGhpcyBpcyBhIHBhcmFncmFwaCBkZW1vbnN0cmF0aW5nIGRpZmZlcmVudCBmb250IHNpemVzLCBmb250IHdlaWdodHMsIGFuZAogICAgICBsaW5lIGhlaWdodHMgdXNpbmcgVGFpbHdpbmQgQ1NTIHV0aWxpdGllcy4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

1. **Schriftgröße:** Verwenden von `text-4xl`, `text-2xl`, `text-base` für Schriftgrößen;
2. **Schriftgewicht:** Verwenden von `font-bold`, `font-semibold`, `font-normal` für Schriftgewichte;
3. **Zeilenhöhe:** Verwenden von `leading-normal`, `leading-tight`, `leading-relaxed` für Zeilenhöhen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMSBjbGFzcz0idGV4dC00eGwgZm9udC1ib2xkIGxlYWRpbmctbm9ybWFsIj5NYWluIEhlYWRpbmc8L2gxPgogICAgPGgyIGNsYXNzPSJ0ZXh0LTJ4bCBmb250LXNlbWlib2xkIGxlYWRpbmctdGlnaHQiPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9InRleHQtYmFzZSBmb250LW5vcm1hbCBsZWFkaW5nLXJlbGF4ZWQiPgogICAgICBUaGlzIGlzIGEgcGFyYWdyYXBoIGRlbW9uc3RyYXRpbmcgZGlmZmVyZW50IGZvbnQgc2l6ZXMsIGZvbnQgd2VpZ2h0cywgYW5kCiAgICAgIGxpbmUgaGVpZ2h0cyB1c2luZyBUYWlsd2luZCBDU1MgdXRpbGl0aWVzLgogICAgPC9wPgogIDwvYm9keT4KPC9odG1sPg==

Effizientes Gestalten von Websites mit Tailwind CSS, einem Utility-First-Framework für schnelle UI-Entwicklung. Einführung in die Einrichtung von Tailwind und die Anwendung von Utility-Klassen für Farben, Typografie, Rahmen und Schatten. Gestaltung und Design grundlegender Komponenten wie Buttons, Karten und Formulare. Beherrschung von Layout-Techniken mit Abstands-, Flexbox- und Grid-Utilities. Entwicklung responsiver Designs und Anpassung von Tailwind an projektspezifische Anforderungen.

Lernen Sie Tailwind CSS kennen, ein Utility-First-Framework, das für seine Flexibilität und Effizienz im Webdesign bekannt ist. Entdecken Sie die wichtigsten Vorteile und die Utility-First-Philosophie. Außerdem werden die einfachen Installationsmethoden über CDN oder npm/yarn vorgestellt.

Entdecken Sie die grundlegenden Elemente von Tailwind CSS, einschließlich des Verständnisses von Utility-Klassen und deren Anwendung auf HTML-Elemente. Vertiefen Sie sich in wesentliche Gestaltungstechniken wie das Festlegen von Farben, Rändern, Schatten und Typografie-Utilities.

Vertiefung in praktische Anwendungen mit Fokus auf die Erstellung und Gestaltung von Buttons, Formularen und Karten.
Durch praxisnahe Herausforderungen wird das Erstellen dieser grundlegenden UI-Komponenten anhand von Beispielen aus der realen Welt vermittelt und die Fähigkeiten werden erweitert.

Erkunden Sie die grundlegenden Abstands-Utilities von Tailwind CSS, einschließlich der Anwendung von Margin und Padding auf Ihre Elemente. Außerdem lernen Sie, Flexbox-Utilities zu nutzen, um das Layout mit Anzeigeeinstellungen, Flex-Richtung sowie horizontaler und vertikaler Ausrichtung zu steuern. Zusätzlich befassen Sie sich mit Grid-Utilities, um einfache und dennoch leistungsstarke Grid-Layouts zu erstellen und die Einrichtung von Grid-Containern und -Elementen zu beherrschen.

Erfahren Sie, wie Sie Tailwind CSS an die Designanforderungen Ihres Projekts anpassen und flexible Layouts für verschiedene Geräte erstellen.

Herausforderung: Typografie in Aktion

Aufgabe

Herausforderung: Typografie in Aktion

Aufgabe