# 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 **häufige Kombinieren von Komponenten wie Buttons, Cards oder Modals** kann mühsam sein. **daisyUI** baut auf Tailwind auf und fügt **Komponenten‑Klassen + Themes** hinzu, wodurch Design‑ und Styling‑Zeit erheblich reduziert wird.

> Die Installations- und Konfigurationsschritte variieren leicht je nach Framework (Next.js, Vite, Remix usw.). In diesem Beitrag gehen wir davon aus, dass die Installation bereits abgeschlossen ist. Falls Sie noch starten müssen, lesen Sie die Installations‑Anleitung von daisyUI: 
>
> [Offizielle Installations‑Anleitung]([https://daisyui.com/docs/install/](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 „Komponenten‑Klassen“** bereitstellt. Statt jedes Element mit einzelnen Utility‑Klassen zu kombinieren, können Sie Klassen wie `btn`, `card` oder `modal` direkt verwenden.

* **Komponenten‑Klassen**: `btn`, `card`, `navbar`, `modal` – sofort einsatzbereit
* **Theme‑System**: Mit `data-theme="light"` lässt sich das Theme einfach wechseln
* **Nahtlose Integration mit Tailwind**: Feine Anpassungen bleiben möglich

Der größte Vorteil, den man sofort spürt, ist:

* **Das Rendering bleibt gleich, aber der HTML‑Code wird deutlich kürzer**

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

## daisyUI vs. ohne daisyUI: Gleiche Ergebnisse, kürzerer Code {#sec-5cfe2ef052d5}

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

**(A) Nur Tailwind** – Man muss die Utility‑Klassen selbst kombinieren.

```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** – Der gleiche Button lässt sich mit einer kurzen Komponenten‑Klasse darstellen.

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

Der Punkt ist nicht, dass Tailwind nicht möglich ist, sondern dass daisyUI die wiederkehrenden Kombinationen als Standardwert bündelt. So füllt man schnell die Seite und kann anschließend mit Tailwind Details anpassen.

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

**(A) Nur Tailwind** – Card‑Container, Titel, Text und Action‑Bereich werden jeweils kombiniert.

```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 dieselbe Card an mehreren Stellen verwenden, werden die Klassen lang und dupliziert.
    </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"
      >
        확인
      </button>
    </div>
  </div>
</div>
```

**(B) Mit daisyUI** – Die „Rolle“ der Card wird sofort sichtbar, und bei Bedarf kann Tailwind ergänzt werden.

```html
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title</h2>
    <p>
      daisyUI bietet wiederkehrende UI‑Strukturen als Komponenten‑Klassen, sodass der HTML‑Code kürzer wird.
    </p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">확인</button>
    </div>
  </div>
</div>
```

Zusammengefasst:

* **Kürzere Klassen** → bessere Lesbarkeit
* **Standardwerte für wiederkehrende UI‑Muster** → Konsistenz
* **Theme‑Unterstützung** → schnelle Einheitlichkeit

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

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

daisyUI glänzt vor allem durch die **Theme‑Wechsel**. Es nutzt CSS‑Variablen, sodass die Farben, Hintergründe und Texttöne der gesamten App 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‑Toggle mit JavaScript {#sec-7b566121ce43}

```js
const html = document.documentElement;

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

Vorteile dieser Methode:

* **Globaler Theme‑Wechsel** statt einzelne Komponenten zu färben
* **Schnelle Stabilisierung des Design‑Systems** in der frühen Projektphase

## Tailwind und daisyUI gemeinsam nutzen! {#sec-37cabbde5dcc}

daisyUI eignet sich hervorragend, um die Grundstruktur zu definieren, und Tailwind für die Feinabstimmung.

Beispiel: Button‑Abstände, Ausrichtung und Responsivität mit Tailwind ergänzen.

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

* `btn btn-primary` – Konsistenter Komponenten‑Stil
* `w-full sm:w-auto px-6` – Layout, Responsivität, Feinanpassung

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

* **MVP / Prototyping** – Schnell ein hübsches, funktionierendes UI erstellen
* **Dashboards / Admin‑Panels** – Viele wiederkehrende UI‑Muster (Tabellen, Cards, Formulare)
* **Kleine Teams / Solo‑Entwickler** – Wenig Zeit für ein eigenes Design‑System
* **Services mit starkem Theme‑Bedarf** – Dark‑Mode, Marken‑Skins einfach handhaben

## Zu beachten {#sec-2d963d052126}

* **Klassen‑Namensgebung** wird im daisyUI‑Stil ergänzt (`btn`, `card`, `navbar` usw.). Prüfen Sie, ob dies mit Ihren Team‑Konventionen kollidiert.
* **Extrem individuelle Designs** können durch die Standard‑Komponenten eingeschränkt sein. In den meisten Fällen lässt sich jedoch mit Tailwind‑Utilities anpassen, oder man überschreibt die Komponenten‑Klassen.

## Fazit {#sec-522cfdd1fcf2}

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

Im nächsten Beitrag werden wir uns mit:

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

…in noch mehr Detailtiefe beschäftigen.