papopporking-oss/opencode-nextjs-standard

Installiere daisyUI 5

Installationsanleitung

1. Du musst Tailwind CSS 4 zusammen mit daisyUI 5 verwenden.
2. Die Datei tailwind.config.js ist in Tailwind CSS v4 veraltet. Verwende tailwind.config.js nicht. Wenn Tailwind CSS v4 als Node.js-Abhängigkeit installiert ist, füge nur @import "tailwindcss"; in die CSS-Datei ein.
3. Um daisyUI 5 zu installieren, führe npm i -D daisyui@latest aus. Füge dann @plugin "daisyui"; in die CSS-Datei ein.
4. Installiere daisyUI nach Möglichkeit als Abhängigkeit. Falls du einen bestimmten Grund hast, stattdessen ein CDN zu verwenden, nutze die Tailwind CSS- und daisyUI-CDN-Dateien:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

5. Wenn Tailwind CSS und daisyUI als Node.js-Abhängigkeiten installiert sind, verwende diese CSS-Datei:

@import "tailwindcss";
@plugin "daisyui";

CDN

Für eine Browser-Setup ohne Installation lade das vorkompilierte daisyUI-CSS und den Tailwind-Browser-Build:

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Die Haupt-CDN-Datei enthält die hellen und dunklen Themes. Um alle integrierten Themes zu laden, verwende:

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

Du kannst auch separate daisyUI-CSS-Module vom CDN kombinieren. Die CDN-Dateien enthalten nicht die Varianten is-drawer-open: und is-drawer-close:.

Standalone- und frameworkspezifisches Setup

• Wenn du die Tailwind CSS Standalone-Ausführungsdatei ohne Node.js verwendest, nutze die Standalone-Anleitung.
• Für andere Installationen wähle die Anleitung für das entsprechende Framework oder Build-Tool: 11ty, Angular, Astro, Bun, Tailwind CLI, Dioxus, Django, Electron, Elysia, Ember, Fresh, HTMX, Laravel, Lit, Next.js, Nuxt, Phoenix, PostCSS, Preact, Qwik, Rails, React, React Router, Rsbuild, Solid, SolidStart, SvelteKit, UnoCSS, Vike, Vite, Vue, Waku, WordPress, Yew, oder Zola.

Verwende die Dateipfade und Integrationsschritte aus der gewählten Anleitung. Jedes Framework kann einen anderen CSS-Einstiegspunkt verwenden.