3.8 KiB
3.8 KiB
| name | description |
|---|---|
| daisyui-install | Installation notes for daisyUI 5 |
daisyUI 5 install notes
- daisyUI 5 requires Tailwind CSS 4
tailwind.config.jsfile is deprecated in Tailwind CSS v4. Do not usetailwind.config.js. Tailwind CSS v4 only needs@import "tailwindcss";in the CSS file if it's a node dependency.- daisyUI 5 can be installed using
npm i -D daisyui@latestand then adding@plugin "daisyui";to the CSS file - daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:
<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>
- A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)
@import 'tailwindcss';
@plugin 'daisyui';
CDN
For a no-install browser setup, load the precompiled daisyUI CSS and Tailwind's 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>
The main CDN file includes the light and dark themes. Load every built-in theme with:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
Individual daisyUI CSS modules can also be combined from the CDN. The is-drawer-open: and is-drawer-close: variants are not included in CDN files.
Standalone and framework-specific setup
- Use the standalone guide when using the Tailwind CSS standalone executable without Node.js.
- Otherwise select the guide that matches the existing framework or 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, or Zola.
Follow the selected guide's file paths and integration steps instead of assuming every framework uses the same CSS entry.