Glückwunsch!

Glückwunsch, du hast den Tailwind-Kurs abgeschlossen! Du hast eine ganze Website damit gestaltet, für Smartphones und Computer, hell und dunkel.

Das hast du im Kurs gelernt:

• Tailwind ist ein CSS-Framework aus kleinen Utility-Klassen. Statt Regeln zu schreiben, gibst du Elementen Klassen, und Tailwind erzeugt das CSS für genau die Klassen, die es in deinen Dateien findet. @import "tailwindcss"; schaltet es ein, und seine Basisstile, Preflight, entfernen die eigenen Stile des Browsers.
• Farben aus der Palette (bg-orange-500, text-stone-800), auch halbtransparente (bg-black/50), und Text: Größe, Stärke, Zeilenhöhe, Ausrichtung, Buchstabenabstand und Schriftart.
• Die Abstandsskala, in der eine Stufe 4 px ist: Padding, Margin, Breite und Höhe, maximale Breiten und Werte in eckigen Klammern, wenn du einen außerhalb der Skala brauchst.
• Rahmen, runde Ecken, Schatten, Deckkraft und mit object-cover zugeschnittene Bilder.
• Layout mit Flexbox und Grid (flex, justify-between, items-center, gap-6, grid-cols-3) und Positionierung (relative, absolute, sticky top-0).
• Varianten für Zustände wie hover:, focus:, active:, disabled: und group-hover: und sanfte Übergänge.
• Responsives Design: Mobile first und die Breakpoints sm:, md:, lg: und xl:.
• Der Dark Mode mit dark:, umgeschaltet durch die Klasse dark am Element html.
• Tailwind anpassen: eigene Farben und Schriftarten in @theme und eigene Klassen mit @apply und @utility.

Tailwind auf deinem eigenen Computer. Browser verstehen @import "tailwindcss"; nicht. Auf unserer Website verwandelt ein Programm deine style.css bei jedem Klick auf Ausführen in gewöhnliches CSS. Wenn du deine beiden Dateien einfach auf deinem eigenen Computer öffnest, hat die Seite keine Stile. Es gibt zwei Wege, das zu beheben.

Für schnelle Experimente das Play CDN. Ersetze im head den Link auf style.css durch dieses Skript und setze den ganzen Inhalt von style.css in ein style-Element mit type="text/tailwindcss" (hier gekürzt):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
	@import "tailwindcss";
	@custom-variant dark (&:where(.dark, .dark *));

	@theme {
		--color-marke-500: #f97316;
	}
</style>

Das Skript ist Tailwind selbst, im Browser ausgeführt: Jedes Mal, wenn die Seite geöffnet wird, findet es die Klassen auf der Seite und erzeugt ihr CSS. Das ist praktisch zum Ausprobieren, aber laut der Dokumentation von Tailwind ist das Play CDN nur für die Entwicklung gedacht, nicht für eine echte Website: Jeder Besucher müsste ganz Tailwind herunterladen und warten, bis das CSS erzeugt ist.

Für eine echte Website ein Build-Tool. Ein Programm auf deinem Computer erzeugt das fertige CSS im Voraus, genau wie unsere Website, und Besucher bekommen eine gewöhnliche CSS-Datei. Dafür brauchst du Node.js, das npm mitbringt, ein Programm zum Installieren von Paketen (fertigen Programmen und Bibliotheken), und das Terminal (die Kommandozeile). Für eine Seite wie deine ist das einfachste Werkzeug die Tailwind CLI (ein Programm für die Kommandozeile). Öffne das Terminal im Ordner mit deiner Seite und führe aus:

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i style.css -o output.css --watch

Der erste Befehl installiert Tailwind in den Ordner. Der zweite liest style.css (-i, die Eingabe), sucht in den Dateien des Ordners nach Klassen und schreibt das fertige CSS in output.css (-o, die Ausgabe). Mit --watch läuft er weiter und erzeugt das CSS neu, sobald du eine Datei speicherst. Binde in index.html output.css statt style.css ein und öffne die Seite wie gewohnt im Browser.

Größere Projekte, vor allem mit JavaScript, verwenden oft Vite, ein Werkzeug, das die Skripte, Stile und Bilder einer ganzen Website aufbereitet. In Vite ist Tailwind ein Plugin. Ein neues Projekt legst du so an (Vite stellt ein paar Fragen: Wähle für einfaches HTML, CSS und JavaScript das Framework Vanilla und die Variante JavaScript, und wenn es anbietet, das Projekt gleich zu installieren und zu starten, antworte mit No, damit du zuerst Tailwind hinzufügen kannst):

npm create vite@latest mein-tierheim
cd mein-tierheim
npm install tailwindcss @tailwindcss/vite

Füge dann das Plugin in die Datei vite.config.js ein (wenn sie nicht im Ordner des Projekts liegt, lege sie an):

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
	plugins: [tailwindcss()],
});

Schreibe ganz oben in die CSS-Datei des Projekts (in der Vanilla-Vorlage src/style.css) @import "tailwindcss"; und starte das Projekt mit npm run dev. Es zeigt dir die Adresse deiner Seite, etwa http://localhost:5173/. Die Dokumentation von Tailwind (tailwindcss.com/docs) beschreibt beide Wege Schritt für Schritt unter Installation und auch, wie du Tailwind mit Frameworks verwendest.

Helfer. Wenn du in Visual Studio Code programmierst, installiere die Erweiterung Tailwind CSS IntelliSense: Sie schlägt dir beim Tippen Klassennamen vor, und wenn du mit der Maus auf eine Klasse zeigst, zeigt sie das CSS, das die Klasse erzeugt. Und prettier-plugin-tailwindcss ist ein Plugin für Prettier, ein Programm, das Code aufräumt: Es sortiert die Klassen in jedem class-Attribut in dieselbe Reihenfolge, damit sie sich leichter lesen lassen.

Speichere deine Seite. Lege wie am Ende des CSS-Kurses auf deinem Computer einen Ordner an und speichere den Code von index.html als index.html darin und den Code von style.css als style.css. Verwende dann einen der beiden Wege oben, um sie mit ihren Stilen zu sehen. Achte auf die Bilder: Eine Adresse wie /learn/tailwind/cat-orange.svg funktioniert nur auf unserer Website. Verwende die vollständige Adresse, https://www.startcoder.com/learn/tailwind/cat-orange.svg, oder speichere die Bilder in denselben Ordner und schreibe nur ihre Dateinamen.

Wie geht es weiter? Wenn du eine Klasse brauchst, die du noch nicht gelernt hast, schlag sie in der Dokumentation von Tailwind nach: Ihre Suche findet Klassen auch über die CSS-Eigenschaft, die du kennst, etwa justify-content. Und der nächste Schritt auf deinem Weg zu eigenen Websites ist JavaScript. HTML gibt einer Seite ihren Inhalt, CSS und Tailwind ihr Aussehen, und JavaScript erweckt sie zum Leben: Es kann auf Klicks reagieren, wie das kleine Skript deines Dark-Mode-Buttons, den Inhalt der Seite ändern oder mit den Daten aus einem Formular arbeiten. Mach weiter mit dem JavaScript-Kurs.