# Einführung in das Tailwind CSS-Plugin daisyUI: „Nur mit Klassen“ schnell UI erstellen

Tailwind CSS bietet hohe Flexibilität durch Utility-Klassen, aber das **ständige Zusammenstellen von Komponenten wie Buttons, Cards oder Modals** kann mühsam werden. **daisyUI** setzt auf Tailwind auf und ergänzt **Komponentenklassen und ein Theme-System**, wodurch sich Design- und Styling-Zeit deutlich reduzieren lassen.

> Installation und Konfiguration unterscheiden sich je nach Framework (Next.js, Vite, Remix usw.) leicht. In diesem Beitrag wird vorausgesetzt, dass daisyUI bereits installiert ist. Wenn Sie bei null starten, lesen Sie die offizielle Installationsanleitung:
>
> [Offizielle Installationsanleitung](https://daisyui.com/docs/install/)

## Was ist daisyUI? {#sec-ec57db35176a}

daisyUI ist ein Plugin für Tailwind CSS, das **häufig genutzte UI-Muster als „Komponentenklassen“** bereitstellt. Statt jedes Element aus vielen Utility-Klassen zusammenzusetzen, können Sie aussagekräftige, kurze Klassen wie `btn`, `card` oder `modal` direkt verwenden.

* **Komponentenklassen**: `btn`, `card`, `navbar`, `modal` usw. – sofort einsatzbereit
* **Theme-System**: Themes lassen sich z. B. mit `data-theme="light"` einfach umschalten
* **Nahtlose Integration mit Tailwind**: Feine Anpassungen bleiben mit Tailwind-Utilities möglich

Der größte Vorteil, den man sofort merkt, ist:

* **Das Ergebnis bleibt gleich, aber der HTML-Code wird deutlich kürzer.**

Im Folgenden zeigen wir den HTML-Unterschied, wenn man einen „Primary Button“ und eine „Card mit Action Button“ erstellt – einmal ohne und einmal mit daisyUI.

## daisyUI vs. nur Tailwind: Gleiches Ergebnis, weniger Code {#sec-5cfe2ef052d5}

### 1) Primary Button {#sec-4563d8cf36d1}

**(A) Nur Tailwind** – Sie kombinieren die Utility-Klassen selbst, um den Button zu stylen.

```html
<button
  class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
         bg-blue-600 text-white shadow-sm hover:bg-blue-700
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         disabled:opacity-50 disabled:pointer-events-none"
>
  Primary
</button>
```

**(B) Mit daisyUI** – Derselbe Button lässt sich mit einer kurzen Komponentenklasse ausdrücken.

```html
<button class="btn btn-primary">Primary</button>
```

Der Punkt ist nicht, dass Tailwind das nicht könnte, sondern dass daisyUI wiederkehrende Kombinationen als Default bündelt. So lässt sich eine Oberfläche schnell aufbauen und anschließend mit Tailwind im Detail verfeinern.

### 2) Card + Action Button {#sec-e3b0198ef450}

**(A) Nur Tailwind** – Card-Container, Titel, Text und Action-Bereich werden separat zusammengesetzt.

```html
<div class="w-96 rounded-2xl bg-white shadow-xl">
  <div class="p-6">
    <h2 class="text-lg font-semibold">Card title</h2>
    <p class="mt-2 text-sm text-slate-600">
      Wenn Sie dasselbe Card-Muster an mehreren Stellen verwenden, wird die Klassenliste lang und doppelt sich.
    </p>
    <div class="mt-4 flex justify-end">
      <button
        class="inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
               bg-blue-600 text-white shadow-sm hover:bg-blue-700
               focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
      >
        Bestätigen
      </button>
    </div>
  </div>
</div>
```

**(B) Mit daisyUI** – Die „Rolle“ der Card ist sofort erkennbar, und bei Bedarf kann Tailwind ergänzen.

```html
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUI stellt wiederkehrende UI-Gerüste als Komponentenklassen bereit und verkürzt dadurch den HTML-Code.
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Bestätigen</button>
    </div>
  </div>
</div>
```

Zusammengefasst bietet daisyUI:

* **kürzere Klassenlisten** → bessere Lesbarkeit
* **einheitliche Defaults für wiederkehrende UI-Muster** → mehr Konsistenz
* **Theme-Support** → schnelle, konsistente Gestaltung

Im nächsten Abschnitt erklären wir, warum das Theme-System besonders praktisch ist.

## Theme-System: Warum Dark Mode und Brand Themes so einfach werden {#sec-e1ef69dace76}

daisyUI überzeugt vor allem beim **Theme-Wechsel**. Es nutzt CSS-Variablen, sodass Farben, Hintergründe und Texttöne app-weit automatisch angepasst werden.

![Light vs. Dark Theme Switch](/media/editor_temp/6/6ac85d97-48bb-4f3b-8533-b8976e840cdd.png)

### Theme im HTML anwenden {#sec-57f1de3ec600}

```html
<html data-theme="light">
  <body>
    <button class="btn btn-primary">Hello</button>
  </body>
</html>
```

### Theme per JavaScript umschalten {#sec-7b566121ce43}

```js
const html = document.documentElement;

function toggleTheme() {
  const next = html.getAttribute("data-theme") === "dark" ? "light" : "dark";
  html.setAttribute("data-theme", next);
}
```

Vorteile dieses Ansatzes:

* Farbwechsel **global** statt pro Komponente
* Das Design-System (Farben, Tonalität) lässt sich früh im Projekt schnell stabilisieren

## Tailwind und daisyUI zusammen verwenden {#sec-37cabbde5dcc}

daisyUI eignet sich gut, um schnell eine **Grundform** zu etablieren, und Tailwind, um die **Details** zu justieren.

Beispiel: Mit Tailwind Abstände, Ausrichtung und Responsivität ergänzen:

```html
<button class="btn btn-primary w-full sm:w-auto px-6">
  Speichern
</button>
```

* `btn btn-primary`: Komponentenstil (Konsistenz)
* `w-full sm:w-auto px-6`: Layout, Responsivität, Feintuning

## Wann ist daisyUI besonders vorteilhaft? {#sec-0d80958f4123}

* **MVP / Prototyping**: Schnell ein funktionierendes, ansehnliches UI bauen
* **Dashboards / Admin-Panels**: Viele wiederkehrende Muster wie Tabellen, Cards und Formulare
* **Kleine Teams / Solo-Entwickler**: Wenig Zeit für ein eigenes Design-System
* **Services mit Theme-Bedarf**: Dark Mode oder brand-spezifische Skins einfach betreiben

## Dinge, die man beachten sollte {#sec-2d963d052126}

* **Klassenbenennung** folgt daisyUI-Konventionen (`btn`, `card`, `navbar` usw.). Prüfen Sie, ob das zu Ihren Team-Konventionen passt.
* **Sehr individuelle Designs** können sich durch Default-Styles eingeschränkt anfühlen. In vielen Fällen lässt sich das aber mit Tailwind-Utilities überschreiben oder bei Bedarf komponentenweise neu definieren.

## Fazit {#sec-522cfdd1fcf2}

daisyUI ist ein praxisnahes Plugin, das die Produktivität von Tailwind weiter steigert. Durch **Komponentenklassen** und ein **Theme-System** lässt sich UI schnell erstellen und konsistent halten.

Im nächsten Beitrag schauen wir uns an:

* Theme-Auswahl und -Anpassung für Ihr Projekt
* Was daisyUI-Themes sind und warum der Wechsel so unkompliziert ist

Wir steigen dann tiefer in diese Themen ein.