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:
Was ist daisyUI?
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,modalusw. – 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
1) Primary Button
(A) Nur Tailwind – Sie kombinieren die Utility-Klassen selbst, um den Button zu stylen.
<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.
<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
(A) Nur Tailwind – Card-Container, Titel, Text und Action-Bereich werden separat zusammengesetzt.
<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.
<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
daisyUI überzeugt vor allem beim Theme-Wechsel. Es nutzt CSS-Variablen, sodass Farben, Hintergründe und Texttöne app-weit automatisch angepasst werden.
Theme im HTML anwenden
<html data-theme="light">
<body>
<button class="btn btn-primary">Hello</button>
</body>
</html>
Theme per JavaScript umschalten
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
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:
<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?
- 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
- Klassenbenennung folgt daisyUI-Konventionen (
btn,card,navbarusw.). 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
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.
Es sind keine Kommentare vorhanden.