Tailwind CSS

Modul 1: Das "Warum" & Die Installation (2-3 Std.)

1. Semantic CSS (Der klassische Weg)

Hier steht die Bedeutung (Semantik) des Inhalts im Vordergrund. Du überlegst dir zuerst: „Was ist das für ein Element?“ und gibst ihm einen Namen.

Vorgehensweise: Du schreibst im HTML eine Klasse wie class="newsletter-button".
CSS-Datei: In einer separaten Datei definierst du alle Eigenschaften (Farbe, Abstand, Schrift) für genau diese eine Klasse.
Vorteil: Das HTML bleibt „sauber“ und kurz.
Nachteil: Man muss ständig neue Namen erfinden (.card-wrapper, .card-inner-red). Die CSS-Datei wird riesig und unübersichtlich

<button class="btn-primary">Klick mich</button>

.btn-primary {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

2. Utility-First CSS (Der Tailwind-Weg)

Hier steht die Funktion (Utility) im Vordergrund. Du hast hunderte kleine Klassen, die jeweils nur eine einzige Sache tun (z. B. „mach den Hintergrund blau“ oder „schreibe fett“).

Vorgehensweise: Du baust dein Design direkt im HTML zusammen, indem du diese kleinen Bausteine kombinierst.
CSS-Datei: Du schreibst fast kein eigenes CSS mehr. Tailwind liefert alles mit.
Vorteil: Du bist extrem schnell. Du musst keine CSS-Datei mehr öffnen und keine Namen für Klassen erfinden.
Nachteil: Das HTML sieht am Anfang „unordentlich“ aus, weil viele Klassen in einer Zeile stehen.

Beispiel:

<button class="bg-blue-500 text-white py-2 px-4 rounded">
  Klick mich
</button>

Live-Demo:

- - Tailwind Play.
  - Tippe live: <div class="bg-blue-500 p-10 text-white rounded-2xl shadow-2xl hover:bg-blue-700 transition">Hallo Klasse!</div>.
  - Beobachtung: Styling passiert sofort im HTML. Keine Klassen-Namen-Erfindung (.button-blue-rounded-final-v2) nötig.

Warum wir TailwindCSS lernen

Fokus & Flow

Kein "Kontext-Switching" mehr. Du schreibst dein Design direkt ins HTML, ohne ständig zwischen Dateien hin- und herpringen zu müssen. Das macht dich extrem schnell.

Keine Side-Effects

In klassischem CSS hast du oft Angst, etwas zu löschen. In Tailwind sind Änderungen lokal – änderst du eine Klasse am Button, bleibt der Rest der Website garantiert unberührt.

Extreme Performance

Tailwind wirft alles ungenutzte CSS raus. Deine fertige CSS-Datei ist oft winzig klein, was für blitzschnelle Ladezeiten sorgt.

Design-System

Nie wieder "Magic Numbers". Tailwind gibt dir logische Abstände und Farben vor, damit alles automatisch professionell aussieht.

Mobile First

Responsives Design ist in Tailwind eingebaut. Mit einfachen Kürzeln wie md: passt du Layouts für Tablets und Handys sofort an.

Installation

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

VS Studio Code

📦 Erforderliches Plugin

Installiere über den Marketplace:

Tailwind CSS IntelliSense

⚠️ Wichtig für die Autovervollständigung:

Damit dir VS Code Vorschläge für die Tailwind-Klassen anzeigt, muss das Plugin dein Projekt als "Tailwind-Projekt" erkennen.

Erstelle eine Datei namens:
tailwind.config.js
(direkt im Hauptordner deines Projekts)

Ohne diese Konfigurationsdatei bleibt das Plugin inaktiv und zeigt keine Code-Vorschläge an.

🤖 KI-Unterstützung: GitHub Copilot

Copilot ist dein KI-Programmierpartner, der direkt in VS Code integriert ist.

Aktivierung: Installiere die Erweiterung "GitHub Copilot" und melde dich mit deinem Account an.
Ghost Text: Während du tippst, macht Copilot graue Vorschläge. Drücke Tab, um sie zu übernehmen.
Chat: Nutze Strg + I (Inline) oder die Seitenleiste, um der KI Fragen zu deinem Code zu stellen.

Dokumentation von Tailwind CSS

Modul 2: Box-Modell & Design-System (3 Std.)

Ziel: Die Logik hinter den Abständen und Farben verstehen.

Spacing: m- (Margin) und p- (Padding). Erklären des Skalensystems (z.B. p-4 = 1rem = 16px).
Farben & Typografie: text-, bg-, border-. Die Farbskalen von 50 bis 950 verstehen.
Sizing: w- (Width), h- (Height), max-w-.
Übung: Erstellen eines Farbschemas und Layouts für ein „Hero-Element“ (Überschrift, Text, zwei Buttons).

Übung „Social Media Post“

Container mit Schatten und abgerundeten Ecken.
Ein Bild (nutze https://picsum.photos/200).
Einen „Folgen“-Button, der beim Drüberfahren die Farbe ändert.

Vorgegebener Code-Schnipsel:

<div class="________"> 
    <img src="https://picsum.photos/200" class="________"> 
    <h1 class="________">Tailwind ist cool</h1>
    <button class="________">Folgen</button>
</div>

Übung „Buttonfabrik“

Erstelle drei verschiedene Buttons:

1. „Gefahr“: Rot, breit, weiße Schrift, fetter Text.
2. „Ghost-Button“: Nur ein blauer Rahmen, blaue Schrift, beim Hover füllt er sich blau.
3. „Pill-Button“: Komplett rund (rounded-full), grün, kleiner Text.

Vorgegebener Code-Schnipsel:

<div class="________________">

  <button class="__________________">
    GEFAHR!
  </button>

  <button class="__________________">
    Ghost Button
  </button>

  <button class="________________">
    AKTIVIEREN
  </button>

</div>

Übung „Profil Card“

Erstelle eine Profilkarte für ein Teammitglied. Die Karte soll folgende Eigenschaften haben:

Container: Weißer Hintergrund, abgerundete Ecken, ein dezenter Schatten.
Bild: Das Bild soll kreisrund sein (rounded-full) und einen farbigen Rahmen haben.
Badge: Ein kleiner Text (z.B. „Admin“ oder „Pro“), der in einer Ecke steht, einen farbigen Hintergrund hat und sehr kleine, fettgedruckte Schrift nutzt.

Vorgegebener Code-Schnipsel:

<div class="______">
  <img src="https://i.pravatar.cc/150?u=1" class="_________">
  <h3 class="__________">Max Mustermann</h3>
  <p class="___________">Web Designer</p>
  <span class="____________">PRO</span>
</div>

Übung „Preistabelle“

Aufgabenstellung: Erstellt eine Preiskarte für ein Abo-Modell (z. B. „Gaming-Pass“ oder „Streaming-Abo“).

Struktur: Oben der Name des Abos, darunter der Preis in groß, dann eine Liste mit 3 Vorteilen.
Hervorhebung: Erstellt zwei Varianten der Karte nebeneinander.
- Karte 1 („Basis“): Schlicht, grauer Rand, dezenter Button.
- Karte 2 („Premium“): Blauer Hintergrund, weißer Text, glühender Schatten (shadow-blue-500/50) und ein „Beliebt“-Badge oben rechts.
Interaktion: Der Button in der Premium-Karte soll beim Hovern „pulsieren“ oder die Farbe wechseln.

Vorgegebene Klassen-Bausteine:

text-4xl font-extrabold (für den Preis), space-y-3 (um die Abstände zwischen den Listenelementen automatisch zu steuern), relative (für das Badge).

Vorgegebener Code-Schnipsel:

<div class="flex gap-4">
  
  <div class="__________">
    <h3 class="___________-">Basis</h3>
    <p class="___________">0 € <span class="___________">/ Monat</span></p>
    <ul class="_____________">
      <li>✅ 1 Account</li>
      <li>✅ SD Qualität</li>
      <li class="_____________">❌ Offline Modus</li>
    </ul>
    <button class="___________">Wählen</button>
  </div>

  <div class="bg-indigo-600 ___________ shadow-indigo-400 ">
    <span class="_____________">BELIEBT</span>
    <h3 class="_____________">Premium</h3>
    <p class="______________">15 € <span class="text-sm font-light text-indigo-100">/ Monat</span></p>
    <ul class="__________________">
      <li>✅ Unbegrenzt Accounts</li>
      <li>✅ 4K Ultra HD</li>
      <li>✅ Offline Modus</li>
    </ul>
    <button class=" bg-white text-indigo-600 ________________">Jetzt Starten</button>
  </div>

</div>

Lösung

<h3 class=„text-gray-500 font-bold uppercase tracking-widest“>Basis</h3>

<p class=„text-4xl font-black mt-4“>0 € <span class=„text-sm font-normal“>/ Monat</span></p>

<li>✅ 1 Account</li>

<li>✅ SD Qualität</li>

<li class=„line-through opacity-50“>❌ Offline Modus</li>

</ul>

<button class=„w-full mt-8 py-3 border-2 border-gray-800 rounded-xl font-bold hover:bg-gray-800 hover:text-white transition“>Wählen</button>

</div>

<span class=„absolute -top-3 right-4 bg-yellow-400 text-black text-xs px-3 py-1 rounded-full font-bold“>BELIEBT</span>

<h3 class=„text-indigo-200 font-bold uppercase tracking-widest“>Premium</h3>

<p class=„text-4xl font-black mt-4“>15 € <span class=„text-sm font-light text-indigo-100“>/ Monat</span></p>

<li>✅ Unbegrenzt Accounts</li>

<li>✅ 4K Ultra HD</li>

<li>✅ Offline Modus</li>

</ul>

<button class=„w-full mt-8 py-3 bg-white text-indigo-600 rounded-xl font-bold shadow-lg hover:bg-yellow-400 hover:text-black transition-all“>Jetzt Starten</button>

</div>

Modul 3: Layout mit Flexbox & Grid (3-4 Std.)

Ziel: Komplexe Strukturen ohne float oder mühsame CSS-Regeln bauen.

Flexbox: flex, flex-row, flex-col, justify-center, items-center.
Grid: grid, grid-cols-3, gap-4.
Hover & Focus: Interaktivität hinzufügen mit Präfixen (hover:bg-blue-700).

Übung „Zentrierungs-Challenge“ (Flexbox)

Ziel: Den Unterschied zwischen der Hauptachse (justify) und der Querachse (items) verstehen.

Aufgabenstellung: Erstelle einen Container (z. B. eine Sektion deiner Webseite), der genau die volle Höhe des Bildschirms einnimmt (h-screen). Darin soll ein einzelnes „Anmelde-Fenster“ (eine weiße Box) platziert werden.

Zentriere die Box exakt in der Mitte (horizontal und vertikal) mit Flexbox.
Ändere die Ausrichtung so, dass die Box am unteren rechten Rand klebt.
Füge innerhalb der Box drei Icons hinzu, die sich gleichmäßig über die Breite verteilen (justify-between).

Wichtige Klassen: flex, items-center, justify-center, items-end, justify-end, h-screen.

<div class="_________________">

  <div class="bg-white w-full max-w-md p-8 rounded-3xl shadow-2xl">
    
    <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">Login</h2>
    
    <div class="space-y-4">
      <input type="text" placeholder="E-Mail" class="w-full p-3 bg-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500">
      <input type="password" placeholder="Passwort" class="w-full p-3 bg-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <div class="____________________________">
      <span class="text-gray-400 text-sm">Anmelden mit:</span>
      <div class="f________-___">
        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center cursor-pointer hover:bg-blue-200 text-blue-600">G</div>
        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center cursor-pointer hover:bg-blue-200 text-blue-600">f</div>
        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center cursor-pointer hover:bg-blue-200 text-blue-600">A</div>
      </div>
    </div>

    <button class="_____________">
      Einloggen
    </button>
  </div>

</div>

Übung Die „Bento-Box“ Galerie (Grid)

Aufgabenstellung: Erstelle eine Bildergalerie mit 6 Platzhaltern (farbige div-Blöcke oder Bilder von Unsplash).

Nutze grid, um ein Layout mit 3 Spalten zu erstellen.
Setze einen Abstand von gap-4 zwischen die Bilder.
Die Grid-Spezialaufgabe: Sorge dafür, dass das erste Bild über zwei Spalten geht (col-span-2).
Füge einen Hover-Effekt hinzu: Wenn man über ein Bild fährt, soll es leicht dunkler werden und das Bild sich vergrößern (hover:scale-105 overflow-hidden).

Wichtige Klassen: grid, grid-cols-3, gap-4, col-span-2, aspect-video.

<div class="_________">
  <h2 class="text-2xl font-bold mb-6 text-center">Meine Bento-Galerie</h2>
  
  <div class="______________">
    <div class="_________________">
      <span class="text-white font-bold text-xl">Highlight Projekt</span>
    </div>
    
    <div class="h-30 bg-purple-500 rounded-3xl shadow-lg hover:scale-105 transition-transform"></div>
    <div class="h-30 bg-green-500 rounded-3xl shadow-lg hover:scale-105 transition-transform"></div>
    <div class="h-30 bg-yellow-500 rounded-3xl shadow-lg hover:scale-105 transition-transform"></div>
  
  </div>
</div>

Übung Die Navigationsleiste (Flexbox & Focus)

Ziel: Horizontale Layouts bauen und interaktive Zustände für Tastaturnutzer (Barrierefreiheit) testen.

Aufgabenstellung: Baue eine moderne Navigationsleiste (Navbar).

Struktur: Links ein Logo, rechts drei Links (Home, Projekte, Kontakt).
Abstände: Nutze justify-between, um Logo und Links an die gegenüberliegenden Enden zu schieben.
Interaktion:
- Die Links sollen beim Hovern die Farbe ändern.
- Nutze das Präfix focus:, um den Links einen dicken, farbigen Rahmen zu geben, wenn man sie mit der Tab-Taste anwählt (wichtig für die Barrierefreiheit!).
Zusatz: Mache die Navbar „sticky“, sodass sie beim Scrollen immer oben am Rand bleibt.

Wichtige Klassen: flex, justify-between, sticky, top-0, focus:ring-4, focus:ring-blue-300, outline-none.

<nav class="_______________">
  
  <div class="__________________">
    <div class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center transition-transform group-hover:rotate-12">
      <span class="text-white font-bold">T</span>
    </div>
    <span class="text-xl font-bold tracking-tight text-slate-800">TailwindSchool</span>
  </div>

  <div class="_______________________">
    <ul class="_______________________">
    <li>
    <a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1">Home</a>
    </li>
    <li>
    <a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1">Projekte</a>
    </li>
    <li>
    <a href="#" class="text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1">Kontakt</a>
    </li>
    <li>
    <button class="bg-indigo-600 text-white px-5 py-2 rounded-full font-semibold hover:bg-indigo-700 hover:shadow-lg transition-all focus:ring-4 focus:ring-indigo-200 outline-none">
      Anmelden
    </button>
    </li>
    </ul>
  </div>

  <div class="md:hidden text-2xl">☰</div>

</nav>

<<div class="p-10 space-y-10 bg-slate-50">
  <div class="h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic">Scroll mal nach unten...</div>
  <div class="h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic">Die Navbar bleibt oben!</div>
  <div class="h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic">...noch mehr Content...</div>
</div>

Lösung

<nav class=“sticky top-0 z-50 bg-white shadow-md px-6 py-4 flex justify-between items-center“>

<div class=“flex items-center gap-2 cursor-pointer group“>
<div class=“w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center transition-transform group-hover:rotate-12″>
<span class=“text-white font-bold“>T</span>
</div>
<span class=“text-xl font-bold tracking-tight text-slate-800″>TailwindSchool</span>
</div>

<div class=“hidden md:flex items-center gap-8 font-medium“>
<a href=“#“ class=“text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1″>Home</a>
<a href=“#“ class=“text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1″>Projekte</a>
<a href=“#“ class=“text-slate-600 hover:text-indigo-600 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 outline-none rounded-md px-2 py-1″>Kontakt</a>

<button class=“bg-indigo-600 text-white px-5 py-2 rounded-full font-semibold hover:bg-indigo-700 hover:shadow-lg transition-all focus:ring-4 focus:ring-indigo-200 outline-none“>
Anmelden
</button>
</div>

</nav>

<div class=“p-10 space-y-10 bg-slate-50″>
<div class=“h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic“>Scroll mal nach unten…</div>
<div class=“h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic“>Die Navbar bleibt oben!</div>
<div class=“h-64 bg-slate-200 rounded-2xl flex items-center justify-center text-gray-400 italic“>…noch mehr Content…</div>
</div>

Modul 4: Responsive Design – Das Herzstück (2-3 Std.)

Ziel: Mobile-First-Ansatz meistern.

Breakpoints: sm:, md:, lg:, xl:.
Mobile First: Erklären, dass Klassen ohne Präfix für das kleinste Display gelten.
Beispiel: Eine Card, die mobil einspaltig ist und ab md: zweispaltig wird.
- class="grid grid-cols-1 md:grid-cols-2"

Übung Responsive Gallerie

In dieser Übung baust du eine Profil-Karte (z. B. für einen User oder ein Team-Mitglied). Das Besondere: Auf dem Handy soll das Bild oben stehen, auf dem Desktop soll es links neben dem Text stehen.

Erstelle eine Karte, die folgende Kriterien erfüllt:

Struktur: Ein Container mit einem Bild-Bereich und einem Text-Bereich.
Mobil: Das Bild ist oben, der Text darunter. Alles ist zentriert.
Desktop (ab md:): Das Bild wandert nach links, der Text nach rechts. Der Text ist linksbündig.
Design: Nutze rounded-xl, einen Schatten shadow-lg und etwas p-6 (Padding).

<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="__________________">
    
    <div class="__________________________">
      <img src="https://placehold.in/400" alt="Profil" class="w-full h-full object-cover">
    </div>

    <div class="_______________________">
      <span class="text-blue-500 font-bold text-xs uppercase">Team Mitglied</span>
      <h2 class="text-xl font-bold text-gray-900">Max Mustermann</h2>
      <p class="text-gray-600 mt-2">
        Max ist spezialisiert auf responsives Design mit Tailwind CSS. Er liebt es, wie Flexbox komplexe Layouts mit nur wenigen Klassen vereinfacht.
      </p>
      
      <button class="mt-4 bg-indigo-500 text-white px-4 py-2 rounded-md">
        Kontaktieren
      </button>
    </div>

  </div>
  </body>

Lösung

</div>

<span class=„text-blue-600 font-bold uppercase text-xs tracking-widest“>Team Mitglied</span>

<h2 class=„text-2xl font-bold text-gray-800 mb-2“>Max Mustermann</h2>

Max ist spezialisiert auf responsives Design mit Tailwind CSS. Er liebt es, wie Flexbox komplexe Layouts mit nur wenigen Klassen vereinfacht.

</p>

Kontaktieren

</button>

</div>

Bildschirmfoto am 2026-01-31 um 10.40.46

Bildschirmfoto am 2026-01-31 um 10.40.54

Übung Responsive Gallerie

Wir bauen eine Galerie, die sich in drei Stufen anpasst:

Handy (sehr schmal): Alle Bilder stehen untereinander (1 Spalte).
Tablet (mittel): Sobald mehr Platz ist, rutschen sie paarweise nebeneinander (2 Spalten).
Laptop/PC (breit): Es ist genug Platz für ein Profi-Layout (3 Spalten).

Die Tailwind-Breakpoints (Deine „Schaltstellen“)

In Tailwind arbeiten wir „Mobile First“. Das heißt: Alles, was du ohne Vorsatz schreibst, gilt für das kleinste Handy. Die Präfixe md: und lg: schalten erst ab einer bestimmten Breite um:

Präfix	Bedeutung	Ab welcher Breite?	Was passiert in unserer Galerie?
(keines)	Mobile	0px – 767px	`grid-cols-1` (Alles untereinander)
md:	Medium	768px	`md:grid-cols-2` (Zwei Spalten nebeneinander)
lg:	Large	1024px	`lg:grid-cols-3` (Drei Spalten nebeneinander)

Lösung

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 class=„text-sm font-bold“>Webdesign</h1>

<p class=„text-xs“>Dieses Layout paßt sich magisch an.</p>

</div>

<h1 class=„text-sm font-bold“>Webdesign</h1>

<p class=„text-xs“>Dieses Layout paßt sich magisch an.</p>

</div>

<h1 class=„text-sm font-bold“>Webdesign</h1>

<p class=„text-xs“>Dieses Layout paßt sich magisch an.</p>

</div>

</body>

</html>

Bildschirmfoto am 2026-01-31 um 10.30.10

Bildschirmfoto am 2026-01-31 um 10.30.05

Bildschirmfoto am 2026-01-31 um 10.29.57

Modul 5: Effizienz mit DaisyUI (2–3 Std.)

Einbindung DaisyUI

Einbindung in einer HTML-Datei (CDN-Weg)

Das ist die schnellste Methode für VS Code, wenn du keine komplexe Build-Umgebung (Node.js) aufsetzen willst. Du bindest einfach zwei Skripte/Styles ein.

Kopiere dies in den <head> deiner HTML-Datei:

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

<link href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css" rel="stylesheet" type="text/css" />

Wichtig: Da DaisyUI reines CSS ist, erkennt das Tailwind-Skript die Klassen (wie btn oder card) automatisch. Du kannst sofort loslegen und z.B. <button class="btn btn-primary">Test</button> schreiben.

Einbindung in Tailwind Play

Tailwind Play ist das offizielle Online-Tool zum Testen. So aktivierst du DaisyUI dort:

Gehe auf play.tailwindcss.com.
Klicke oben auf den Reiter „Config“.
Füge DaisyUI im Bereich plugins hinzu. Das sieht dann so aus:

JavaScript
module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui"),
  ],
}

Hinweis: In Tailwind Play ist DaisyUI meist schon vorinstalliert, du musst es nur in der Config „einschalten“.

Einbindung über CSS (@import)

Falls du eine eigene CSS-Datei nutzt (wie deine style.css), kannst du DaisyUI auch dort importieren. Das funktioniert aber nur, wenn du das Tailwind-CDN nutzt, das @import unterstützt, oder einen lokalen PostCSS-Compiler hast.

Schreibe ganz oben in deine CSS-Datei:

CSS
@import url('https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css');

@tailwind base;
@tailwind components;
@tailwind utilities;

Ziel: Komplexe Komponenten blitzschnell bauen und das Konzept von UI-Frameworks verstehen.

as ist DaisyUI? * Erklären, dass es ein „Plugin“ ist. Es bündelt viele kleine Tailwind-Klassen zu einem Namen (z.B. statt 10 Klassen für einen Button nur noch btn).
Klassen-Struktur: * Komponente: card, btn, navbar, chat.
- Modifier (Farben/Größen): btn-primary, btn-lg, badge-secondary.
Theming: Das data-theme Attribut im HTML-Tag und wie man die gesamte Website mit einem Wort umfärbt (z.B. von light zu cyberpunk).
Übung: * Baue ein Chat-Fenster mit chat-bubble oder eine Preisliste mit stats innerhalb von 15 Minuten.
- Vergleiche den HTML-Code: Ein DaisyUI-Button vs. ein selbstgebauter Tailwind-Button.

Unterrichtsbeispiel: Der Theme-Switcher & „Speed Coding“

Zeige den Schülern, wie DaisyUI die „Logik“ von Komponenten vereinfacht:

   <div class="alert alert-info shadow-lg">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span>Neues Update verfügbar!</span>
        <div>
            <button class="btn btn-sm btn-primary">Ansehen</button>
        </div>
    </div>

Beipiel für DaisyUI

<main class="max-w-5xl mx-auto p-8 space-y-12">

        <div class="text-center space-y-4">
            <h1 class="text-5xl font-extrabold">Willkommen in der DaisyUI Welt!</h1>
            <p class="text-lg opacity-70">Hier lernst du, wie man mit fertigen Komponenten wahnsinnig schnell Webseiten baut.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            
            <div class="card bg-base-100 shadow-xl group hover:border-primary border-2 border-transparent transition-all">
                <figure class="px-10 pt-10">
                    <img src="https://i.pravatar.cc/150?u=9" alt="Avatar" class="rounded-full w-32 h-32 border-4 border-primary transition-transform duration-500 group-hover:rotate-12" />
                </figure>
                <div class="card-body items-center text-center">
                    <h2 class="card-title text-2xl">Max Mustermann</h2>
                    <p>Web-Development Schüler der 10. Klasse</p>
                    <div class="card-actions">
                        <button class="btn btn-primary">Folgen</button>
                        <button class="btn btn-outline">Nachricht</button>
                    </div>
                </div>
            </div>

            <div class="space-y-6">
                <div class="chat chat-start">
                    <div class="chat-bubble chat-bubble-primary">Hey! Hast du schon DaisyUI ausprobiert?</div>
                </div>
                <div class="chat chat-end">
                    <div class="chat-bubble chat-bubble-secondary">Ja, es ist so viel einfacher als reines CSS! 😍</div>
                </div>

                <div class="stats shadow w-full">
                    <div class="stat">
                        <div class="stat-figure text-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        </div>
                        <div class="stat-title">Lernerfolg</div>
                        <div class="stat-value text-secondary">89%</div>
                        <div class="stat-desc">Januar - Februar</div>
                    </div>
                </div>

                <div class="space-y-2">
                    <span class="text-sm font-bold">Projektfortschritt:</span>
                    <progress class="progress progress-success w-full" value="70" max="100"></progress>
                </div>
            </div>

        </div>

        <footer class="footer footer-center p-10 bg-base-100 text-base-content rounded-xl shadow-inner">
            <aside>
                <p class="font-bold">
                    EduCode Highschool <br/>Seit 2024 den Code im Griff.
                </p> 
                <p>Copyright © 2026 - Alle Rechte vorbehalten</p>
            </aside>
        </footer>

    </main>

Beispiel DaisyUI Darkmode Toggle

<!DOCTYPE html>
<html lang="de" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DaisyUI Darkmode Toggle</title>
    <!-- Tailwind & DaisyUI CDN -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-base-200 transition-colors duration-300">

    <!-- Navbar -->
    <div class="navbar bg-base-100 shadow-md px-4 md:px-8">
      <div class="flex-1">
        <a class="text-xl font-bold italic tracking-tighter text-primary">PROJECT.⚡</a>
      </div>
      <div class="flex-none gap-2">
        
        <!-- DARK MODE TOGGLE (Theme Controller) -->
        <label class="swap swap-rotate mr-4">
          <!-- Dieser Checkbox-Input steuert das Theme -->
          <input type="checkbox" class="theme-controller" value="dark" />
          
          <!-- Sun Icon (sichtbar im Dark Mode) -->
          <svg class="swap-on fill-current w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
          
          <!-- Moon Icon (sichtbar im Light Mode) -->
          <svg class="swap-off fill-current w-8 h-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
        </label>

      </div>
    </div>

    <!-- Content Section -->
    <main class="max-w-5xl mx-auto py-12 px-4">
      
      <!-- Hero Section -->
      <div class="hero bg-base-100 rounded-3xl overflow-hidden shadow-xl border border-base-300">
        <div class="hero-content text-center py-20">
          <div class="max-w-md">
            <h1 class="text-5xl font-bold">Hallo Dunkelheit!</h1>
            <p class="py-6 text-base-content/80">Klicke oben auf den Toggle, um zwischen Licht und Schatten zu wechseln. DaisyUI kümmert sich um die Farben, wir nur um den Code.</p>
            <button class="btn btn-primary">Jetzt loslegen</button>
            <button class="btn btn-outline ml-2">Mehr erfahren</button>
          </div>
        </div>
      </div>

      <!-- Stats / Cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
        <div class="card bg-base-100 shadow-xl border border-base-300">
          <div class="card-body">
            <h2 class="card-title text-secondary">Statistik #1</h2>
            <p>Die Farben passen sich automatisch an das gewählte Theme an.</p>
            <div class="badge badge-secondary">Auto-Theme</div>
          </div>
        </div>
        
        <div class="card bg-primary text-primary-content shadow-xl">
          <div class="card-body">
            <h2 class="card-title">Invertierte Karte</h2>
            <p>Diese Karte nutzt Primärfarben und bleibt daher markant.</p>
            <div class="card-actions justify-end">
              <button class="btn btn-sm btn-ghost bg-white/20">Cool!</button>
            </div>
          </div>
        </div>

        <div class="card bg-base-100 shadow-xl border border-base-300">
          <div class="card-body">
            <h2 class="card-title text-accent">Performance</h2>
            <p>Dank Tailwind und DaisyUI ist der Code extrem schlank.</p>
            <progress class="progress progress-accent w-full mt-4" value="70" max="100"></progress>
          </div>
        </div>
      </div>
    </main>

</body>
</html>

Individualisierung von TailwindCSS

<!doctype html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Das v4 Browser-Script -->
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <style type="text/tailwindcss">
        /* FEHLTE: Importiert die gesamte Tailwind-Engine (Base, Utilities, etc.) */
        @import "tailwindcss";

        /* Google Font Import */
        @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

        @theme {
            --font-roboto: "Roboto", sans-serif;
            --color-brand-blue: #1e40af;
            --spacing-128: 32rem;
        }
    </style>
</head>
<body class="p-10 bg-slate-50">

    <h1 class="font-roboto text-4xl font-bold text-brand-blue">
        Hallo aus Tailwind v4!
    </h1>

    <div class="mt-8 w-128 border-l-4 border-brand-blue bg-white p-6 shadow-lg">
        Dieser Kasten nutzt den Custom-Spacing Wert (32rem), die Brand-Farbe und Roboto.
    </div>

</body>
</html>

Projekt Auftrag Webdesign

Erstellung einer responsiven Website mit TailwindCSS & DaisyUI

1. Wähle deinen Client-Brief

The Local Crust

Bio-Bäckerei & Café: Ein gemütlicher, rustikaler Webauftritt für lokale Kunden.

Home: Intro & Tagesangebot
Sortiment: Brot, Gebäck & Kaffee
Story: Unsere Philosophie
Journal: Back-Tipps & News
Kontakt: Reservierung & Anfahrt

Volt-X Portfolio

Freelance Designer: Ein modernes, technisches Portfolio für Motion Design im Dark Mode.

Home: Showreel & Intro
Projekte: Bento-Grid Galerie
Skills: Tech-Stack & CV
Blog: Design-Insights
Kontakt: Projekt-Anfrage

FocusFlow App

Startup: Eine Landingpage für eine Produktivitäts-App für Studenten.

Home: App-Features & CTA
Deep Dive: Funktionsweise
Vision: Das Team dahinter
Tipps: Fokus & Lernen Blog
Support: FAQ & Hilfe

2. Projekt-Anforderungen

Mind. 5 Seiten

Vollständig verlinkte und konsistente Seitenstruktur.

Realer Content

Nutze KI-Texte oder Web-Recherche (Kein Lorem Ipsum!).

Darkmode Toggle

Umschaltbare DaisyUI Themes für User-Experience.

Responsive Design

Optimiert für Smartphone, Tablet und Desktop.

3. Bewertungskriterien

Kategorie	Kriterium	Punkte
Struktur	5 Seiten, Navigation & Links	20
Design	UI-Konsistenz (DaisyUI/Tailwind)	20
Mobility	Mobile-First & Responsivität	25
Technik	Grid-Layout & Darkmode-Switch	20
Inhalt	Textqualität & Bildsprache	15

🚀 Anleitung: Deine Website weltweit veröffentlichen

1. Registrierung (Dein Account)

Um Cloudflare zu nutzen, benötigst du einen kostenlosen Account.

Gehe auf dash.cloudflare.com/sign-up.
Registriere dich mit deiner E-Mail-Adresse und einem sicheren Passwort.
Wichtig: Du erhältst eine Bestätigungs-E-Mail. Klicke auf den Link darin, um deinen Account zu aktivieren. Ohne diesen Schritt kannst du nichts veröffentlichen!

2. Projekt erstellen & Dateiupload

Wir nutzen Cloudflare Pages, einen Dienst speziell für statische Websites (HTML, CSS, Bilder).

Logge dich bei Cloudflare ein.
Klicke in der linken Menüleiste auf "Workers & Pages".
Klicke auf den Button "Create" (Erstellen) und wähle oben den Reiter "Pages" aus.
Wähle nun "Upload assets" (Dateien hochladen).
Gib deinem Projekt einen Namen (z. B. mein-portfolio-2026).
Klicke auf "Create project".
Jetzt siehst du ein Feld für den Upload. Ziehe deinen kompletten Projektordner (der die index.html und den assets-Ordner enthält) per Drag-and-Drop in dieses Feld.

3. Veröffentlichung (Go Live!)

Sobald die Dateien hochgeladen wurden:

Klicke auf "Deploy site".
Cloudflare verarbeitet deine Dateien nun (das dauert meist nur wenige Sekunden).
Du erhältst eine Bestätigung und einen Link, der etwa so aussieht: dein-projektname.pages.dev.

Glückwunsch! Deine Seite ist jetzt unter diesem Link weltweit erreichbar.

4. Dateiverwaltung & Updates

Wenn du später etwas an deiner Website änderst (z. B. einen Tippfehler korrigierst), musst du die Seite aktualisieren:

Gehe in Cloudflare wieder auf "Workers & Pages" und klicke auf dein Projekt.
Wähle den Reiter "Deployments".
Klicke auf "Create new deployment".
Lade deinen aktualisierten Ordner erneut hoch und klicke auf "Save and Deploy". Die alte Version wird automatisch durch die neue ersetzt.

💡 Profi-Tipps für den Erfolg:

Die Index-Regel: Deine Startseite muss zwingend index.html heißen.
Pfade prüfen: Achte auf korrekte Verlinkung deiner Bilder im assets/ Ordner. Groß- und Kleinschreibung ist wichtig!
Der "Schloss"-Check: Deine Seite ist automatisch über https:// gesichert.