Tailwind CSS: Elemente mit Utility-Klassen gestalten

Einführung

In diesem Lab werden Sie mit Tailwind CSS vertraut gemacht, einem sehr beliebten Utility-First CSS-Framework. Im Gegensatz zu traditionellem CSS, bei dem Sie benutzerdefinierte Klassen schreiben, bietet Tailwind Low-Level-Utility-Klassen, die Sie direkt in Ihrem HTML zusammensetzen können, um jedes Design zu erstellen. Sie lernen, wie Sie Tailwind über ein CDN einrichten und grundlegende Utility-Klassen anwenden, um ein einfaches Webseitenelement für Hintergrund, Text, Padding und Layout zu gestalten. Am Ende werden Sie ein praktisches Verständnis für die Leistungsfähigkeit und Geschwindigkeit von Utility-First CSS haben.

Die notwendige index.html-Datei wurde für Sie im Verzeichnis ~/project erstellt. Sie werden sich darauf konzentrieren, diese Datei zu ändern, um Tailwind-Stile anzuwenden.

Tailwind CSS CDN-Link zum HTML-Head hinzufügen

In diesem Schritt fügen Sie Tailwind CSS zu Ihrem Projekt hinzu. Für schnelle Setups und Lernzwecke ist der einfachste Weg die Verwendung des Tailwind CSS CDN. Dies beinhaltet das Hinzufügen eines einzelnen <script>-Tags zum <head>-Bereich Ihrer HTML-Datei.

Warum keine CSS-Datei? Im Gegensatz zu traditionellen CSS-Frameworks ist Tailwind CSS Utility-First. Anstatt CSS-Regeln in externen Dateien zu schreiben, wenden Sie vorgefertigte Utility-Klassen direkt in Ihrem HTML an. Dieser Ansatz macht benutzerdefinierte CSS-Dateien überflüssig.

Offizielle Dokumentation: Die vollständige Referenz zu Tailwind CSS finden Sie unter: https://tailwindcss.com/docs

Öffnen Sie zuerst die Datei index.html im Verzeichnis ~/project über den Dateiexplorer auf der linken Seite der WebIDE.

Fügen Sie nun den folgenden <script>-Tag in den <head>-Bereich Ihrer index.html-Datei ein.

<script src="https://cdn.tailwindcss.com"></script>

Nachdem Sie die Zeile hinzugefügt haben, sollte Ihre index.html-Datei wie folgt aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <!-- Tailwind CSS CDN will be added here -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>Hello, Tailwind!</div>
  </body>
</html>

Speichern Sie die Datei, indem Sie Strg+S drücken. Obwohl Sie noch keine visuellen Änderungen sehen werden, sind die Utility-Klassen von Tailwind nun in Ihrem Projekt verfügbar. Sie können den Tab Web 8080 öffnen, um die ungestylte Seite zu sehen.

Klasse 'bg-blue-500' für Hintergrundfarbe anwenden

In diesem Schritt wenden Sie Ihre erste Tailwind Utility-Klasse an, um die Hintergrundfarbe des <div>-Elements zu ändern. Tailwind verwendet eine Namenskonvention bg-{color}-{shade} für Hintergrundfarben.

Referenz: https://tailwindcss.com/docs/background-color

Wir verwenden die Klasse bg-blue-500, die einen mittelblauen Hintergrund anwendet.

Öffnen Sie die Datei index.html erneut, falls sie noch nicht geöffnet ist. Suchen Sie das <div>-Element und fügen Sie class="bg-blue-500" hinzu.

<div class="bg-blue-500">Hello, Tailwind!</div>

Ihre vollständige index.html-Datei sollte nun wie folgt aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-blue-500">Hello, Tailwind!</div>
  </body>
</html>

Speichern Sie die Datei (Strg+S) und wechseln Sie zum Tab Web 8080. Sie sollten nun den Text "Hello, Tailwind!" in einem Feld mit blauem Hintergrund sehen.

Im Gegensatz zu früheren Labs, in denen Sie CSS-Regeln in externen Dateien geschrieben haben, bietet Tailwind vorgefertigte Utility-Klassen, die Sie direkt in HTML anwenden. Kein benutzerdefiniertes CSS erforderlich – komponieren Sie einfach Utilities wie bg-blue-500, text-white und p-4, um Designs zu erstellen.

Hauptvorteile:

Schnellere Entwicklung: Gestalten Sie direkt in HTML, ohne Dateien wechseln zu müssen
Schnelles Prototyping: Erstellen Sie Layouts sofort mit Utility-Klassen
Konsistentes Design: Standardisierte Abstände, Farben und Größenordnungen
Responsive integriert: Mobile-First-Responsive Utilities enthalten
KI-freundlich: Tailwind ist für die Verwendung mit KI-Tools wie ChatGPT konzipiert, was die Codeerstellung erleichtert.

Klasse 'text-white' für Textfarbe verwenden

In diesem Schritt ändern Sie die Textfarbe, um sie auf dem blauen Hintergrund besser lesbar zu machen. Die Textfarben-Utilities von Tailwind folgen dem Muster text-{color}. Um den Text weiß zu machen, verwenden Sie die Klasse text-white.

Referenz: https://tailwindcss.com/docs/text-color

Sie können einem Element mehrere Klassen hinzufügen, indem Sie sie innerhalb des class-Attributs durch ein Leerzeichen trennen.

Ändern Sie das <div> in Ihrer index.html-Datei, um die Klasse text-white einzuschließen.

<div class="bg-blue-500 text-white">Hello, Tailwind!</div>

Die Reihenfolge der Klassen innerhalb des class-Attributs spielt keine Rolle.

Nach der Änderung sollte der Body Ihrer index.html-Datei wie folgt aussehen:

<body>
  <div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>

Speichern Sie die Datei (Strg+S) und überprüfen Sie den Tab Web 8080. Der Text "Hello, Tailwind!" sollte nun weiß sein und einen besseren Kontrast zum blauen Hintergrund bieten.

Klasse 'p-4' für Padding implementieren

In diesem Schritt fügen Sie dem <div>-Element etwas internen Abstand, also Padding, hinzu. Dies verhindert, dass der Text die Ränder der blauen Box berührt. Tailwind bietet Padding-Utilities im Format p-{size}.

Referenz: https://tailwindcss.com/docs/padding

Wir verwenden die Klasse p-4, die einen mittleren Padding-Betrag (standardmäßig 1rem oder 16px) auf allen vier Seiten des Elements anwendet.

Fügen Sie die Klasse p-4 dem class-Attribut Ihres <div>-Elements in index.html hinzu.

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

Der Body Ihrer index.html-Datei sollte nun wie folgt aussehen:

<body>
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Speichern Sie die Datei (Strg+S) und aktualisieren Sie den Tab Web 8080. Sie werden feststellen, dass nun ein Abstand zwischen dem Text und dem Rand der blauen Box vorhanden ist, was das Design sauberer erscheinen lässt.

Klassen 'flex' und 'justify-center' für das Layout hinzufügen

In diesem letzten Schritt zentrieren Sie das gestylte <div>-Element auf der Seite. Dies können Sie mit den Flexbox-Utilities von Tailwind erreichen.

Dazu wenden Sie Klassen auf das <body>-Tag an, um es zu einem Flex-Container zu machen und dessen Inhalt zu zentrieren.

flex: Diese Klasse wendet display: flex auf das Element an.
justify-center: Diese Klasse zentriert die Flex-Items entlang der Hauptachse (standardmäßig horizontal).
h-screen: Diese Klasse setzt die Höhe des Elements auf 100 % der Viewport-Höhe, was für die vertikale Zentrierung notwendig ist (obwohl wir hier nur horizontal zentrieren, ist es eine gute Praxis für seitenfüllende Layouts).

Ändern Sie das <body>-Tag in Ihrer index.html-Datei, um diese Klassen hinzuzufügen.

<body class="flex justify-center h-screen">
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Ihre vollständige index.html-Datei wird nun wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center h-screen">
    <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
  </body>
</html>

Speichern Sie die Datei (Strg+S) und betrachten Sie das Ergebnis im Tab Web 8080. Ihre gestylte Box sollte nun horizontal auf der Seite zentriert sein.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben erfolgreich Ihre ersten Schritte in die Welt von Tailwind CSS gemacht. In diesem Lab haben Sie gelernt, wie man Tailwind über sein CDN in eine HTML-Datei integriert. Anschließend haben Sie das Kernkonzept eines Utility-First-Frameworks geübt, indem Sie mehrere Klassen direkt auf Ihre HTML-Elemente angewendet haben. Sie sind nun vertraut mit der Verwendung von Utilities für Hintergrundfarbe (bg-blue-500), Textfarbe (text-white), Padding (p-4) und Flexbox-Layout (flex, justify-center, h-screen). Dieses grundlegende Wissen wird Ihnen helfen, komplexere und reaktionsfähigere Designs mit Geschwindigkeit und Konsistenz zu erstellen.

Moderne CSS-Utilities mit Tailwind