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.

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

Plugins installieren:

  1. Tailwind CSS IntelliSense
  2. PostCSS Language Support
  3. Cline
    1. Gemini Flash API Key auf https://aistudio.google.com/

Dokumentation von Tailwind CSS

Tailwind CSS Dokumentation

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:

  1. Container: Weißer Hintergrund, abgerundete Ecken, ein dezenter Schatten.

  2. Bild: Das Bild soll kreisrund sein (rounded-full) und einen farbigen Rahmen haben.

  3. 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“).

  1. Struktur: Oben der Name des Abos, darunter der Preis in groß, dann eine Liste mit 3 Vorteilen.

  2. 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.

  3. 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="____________">
  
  <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
<div class=„flex flex-row md:flex-row gap-8 justify-center p-10 bg-gray-50“>
<div class=„bg-white border-2 border-gray-200 p-8 rounded-3xl w-72 shadow-sm“>
<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>
<ul class=„mt-6 space-y-2 text-gray-600“>
<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>

<div class=„bg-indigo-600 p-8 rounded-3xl w-72 shadow-2xl shadow-indigo-400 text-white relative transform scale-105“>
<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>
<ul class=„mt-6 space-y-2 text-indigo-50“>
<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>

</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.

  1. Zentriere die Box exakt in der Mitte (horizontal und vertikal) mit Flexbox.

  2. Ändere die Ausrichtung so, dass die Box am unteren rechten Rand klebt.

  3. 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).

  1. Nutze grid, um ein Layout mit 3 Spalten zu erstellen.

  2. Setze einen Abstand von gap-4 zwischen die Bilder.

  3. Die Grid-Spezialaufgabe: Sorge dafür, dass das erste Bild über zwei Spalten geht (col-span-2).

  4. 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).

  1. Struktur: Links ein Logo, rechts drei Links (Home, Projekte, Kontakt).

  2. Abstände: Nutze justify-between, um Logo und Links an die gegenüberliegenden Enden zu schieben.

  3. 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!).

  4. 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="_______________________">
    <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>

  <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>

<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>

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:

  1. Struktur: Ein Container mit einem Bild-Bereich und einem Text-Bereich.

  2. Mobil: Das Bild ist oben, der Text darunter. Alles ist zentriert.

  3. Desktop (ab md:): Das Bild wandert nach links, der Text nach rechts. Der Text ist linksbündig.

  4. Design: Nutze rounded-xl, einen Schatten shadow-lg und etwas p-6 (Padding).

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:

  1. Handy (sehr schmal): Alle Bilder stehen untereinander (1 Spalte).

  2. Tablet (mittel): Sobald mehr Platz ist, rutschen sie paarweise nebeneinander (2 Spalten).

  3. 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äfixBedeutungAb welcher Breite?Was passiert in unserer Galerie?
(keines)Mobile0px – 767pxgrid-cols-1 (Alles untereinander)
md:Medium768pxmd:grid-cols-2 (Zwei Spalten nebeneinander)
lg:Large1024pxlg:grid-cols-3 (Drei Spalten nebeneinander)
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

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.

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

  1. Gehe auf play.tailwindcss.com.

  2. Klicke oben auf den Reiter „Config“.

  3. 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“.

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>

Individualisierung von TailwindCSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <script src="https://cdn.tailwindcss.com"></script>

  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'brand-blue': '#1e40af',
          },
          spacing: {
            '128': '32rem',
          }
        }
      }
    }
  </script>
</head>
<body class="bg-brand-blue text-white p-128">
  <h1 class="text-3xl font-bold">Hallo Tailwind!</h1>
</body>
</html>
Tailwind Game

Modul 6: Mini-Projekt & Optimierung (2 Std.)

Ziel: Wissen festigen.

  • Gruppierung: Was tun bei Wiederholungen? (Kurzer Ausblick auf @apply oder – besser – Komponenten-Denkweise).

  • Abschluss: Die Schüler nehmen eine Seite aus ihrem alten Projekt und bauen sie komplett mit Tailwind nach. Sie werden merken, wie viel schneller sie im Vergleich zum ersten Halbjahr sind