papopporking-oss/opencode-nextjs-standard

Installer daisyUI 5

Guide d'installation

1. Vous devez utiliser Tailwind CSS 4 avec daisyUI 5.
2. Le fichier tailwind.config.js est obsolète dans Tailwind CSS v4. N'utilisez pas tailwind.config.js. Si Tailwind CSS v4 est une dépendance Node.js, ajoutez uniquement @import "tailwindcss"; au fichier CSS.
3. Pour installer daisyUI 5, exécutez npm i -D daisyui@latest. Ensuite, ajoutez @plugin "daisyui"; au fichier CSS.
4. Installez daisyUI comme dépendance lorsque c'est possible. Si vous avez une raison spécifique d'utiliser un CDN à la place, utilisez les fichiers CDN de Tailwind CSS et daisyUI :

<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. Si Tailwind CSS et daisyUI sont des dépendances Node.js, utilisez ce fichier CSS :

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

CDN

Pour une configuration navigateur sans installation, chargez le CSS précompilé de daisyUI et la version navigateur de Tailwind :

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

Le fichier CDN principal inclut les thèmes clair et foncé. Pour charger tous les thèmes intégrés, utilisez :

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

Vous pouvez également combiner des modules CSS daisyUI séparés à partir du CDN. Les fichiers CDN n'incluent pas les variantes is-drawer-open: et is-drawer-close:.

Configuration autonome et spécifique aux frameworks

• Si vous utilisez l'exécutable autonome de Tailwind CSS sans Node.js, consultez le guide autonome.
• Pour d'autres installations, sélectionnez le guide correspondant au framework ou à l'outil de build applicable : 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, ou Zola.

Utilisez les chemins de fichiers et les étapes d'intégration du guide sélectionné. Chaque framework peut utiliser un point d'entrée CSS différent.