Install daisyUI 5
Installation guide
- You must use Tailwind CSS 4 with daisyUI 5.
- The
tailwind.config.js file is deprecated in Tailwind CSS v4. Do not use tailwind.config.js. If Tailwind CSS v4 is a Node.js dependency, add only @import "tailwindcss"; to the CSS file.
- To install daisyUI 5, run
npm i -D daisyui@latest. Then, add @plugin "daisyui"; to the CSS file.
- Install daisyUI as a dependency when possible. If you have a specific reason to use a CDN instead, use the 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>
- If Tailwind CSS and daisyUI are Node.js dependencies, use this CSS file:
@import "tailwindcss";
@plugin "daisyui";
CDN
For a browser setup with no installation, load the precompiled daisyUI CSS and the 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>
The main CDN file includes the light and dark themes. To load all built-in themes, use:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
You can also combine separate daisyUI CSS modules from the CDN. The CDN files do not include the is-drawer-open: and is-drawer-close: variants.
Standalone and framework-specific setup
- If you use the Tailwind CSS standalone executable without Node.js, use the standalone guide.
- For other installations, select the guide for the applicable 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.
Use the file paths and integration steps in the selected guide. Each framework can use a different CSS entry.
1---2name: daisyui-install3description: Installation instructions for daisyUI 54---56## Install daisyUI 57[Installation guide](https://daisyui.com/docs/install/)81. You must use Tailwind CSS 4 with daisyUI 5.92. The `tailwind.config.js` file is deprecated in Tailwind CSS v4. Do not use `tailwind.config.js`. If Tailwind CSS v4 is a Node.js dependency, add only `@import "tailwindcss";` to the CSS file.103. To install daisyUI 5, run `npm i -D daisyui@latest`. Then, add `@plugin "daisyui";` to the CSS file.114. Install daisyUI as a dependency when possible. If you have a specific reason to use a CDN instead, use the Tailwind CSS and daisyUI CDN files:12```html13<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />14<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>15```165. If Tailwind CSS and daisyUI are Node.js dependencies, use this CSS file:17```css18@import "tailwindcss";19@plugin "daisyui";20```2122### CDN2324For a browser setup with no installation, load the precompiled daisyUI CSS and the Tailwind browser build:2526```html27<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />28<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>29```3031The main CDN file includes the light and dark themes. To load all built-in themes, use:3233```html34<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />35```3637You can also combine separate daisyUI CSS modules from the CDN. The CDN files do not include the `is-drawer-open:` and `is-drawer-close:` variants.3839### Standalone and framework-specific setup4041- If you use the Tailwind CSS standalone executable without Node.js, use the [standalone guide](https://daisyui.com/docs/install/standalone/).42- For other installations, select the guide for the applicable framework or build tool:43 [11ty](https://daisyui.com/docs/install/11ty/),44 [Angular](https://daisyui.com/docs/install/angular/),45 [Astro](https://daisyui.com/docs/install/astro/),46 [Bun](https://daisyui.com/docs/install/bun/),47 [Tailwind CLI](https://daisyui.com/docs/install/cli/),48 [Dioxus](https://daisyui.com/docs/install/dioxus/),49 [Django](https://daisyui.com/docs/install/django/),50 [Electron](https://daisyui.com/docs/install/electron/),51 [Elysia](https://daisyui.com/docs/install/elysia/),52 [Ember](https://daisyui.com/docs/install/ember/),53 [Fresh](https://daisyui.com/docs/install/fresh/),54 [HTMX](https://daisyui.com/docs/install/htmx/),55 [Laravel](https://daisyui.com/docs/install/laravel/),56 [Lit](https://daisyui.com/docs/install/lit/),57 [Next.js](https://daisyui.com/docs/install/nextjs/),58 [Nuxt](https://daisyui.com/docs/install/nuxt/),59 [Phoenix](https://daisyui.com/docs/install/phoenix/),60 [PostCSS](https://daisyui.com/docs/install/postcss/),61 [Preact](https://daisyui.com/docs/install/preact/),62 [Qwik](https://daisyui.com/docs/install/qwik/),63 [Rails](https://daisyui.com/docs/install/rails/),64 [React](https://daisyui.com/docs/install/react/),65 [React Router](https://daisyui.com/docs/install/reactrouter/),66 [Rsbuild](https://daisyui.com/docs/install/rsbuild/),67 [Solid](https://daisyui.com/docs/install/solid/),68 [SolidStart](https://daisyui.com/docs/install/solid-start/),69 [SvelteKit](https://daisyui.com/docs/install/sveltekit/),70 [UnoCSS](https://daisyui.com/docs/install/unocss/),71 [Vike](https://daisyui.com/docs/install/vike/),72 [Vite](https://daisyui.com/docs/install/vite/),73 [Vue](https://daisyui.com/docs/install/vue/),74 [Waku](https://daisyui.com/docs/install/waku/),75 [WordPress](https://daisyui.com/docs/install/wordpress/),76 [Yew](https://daisyui.com/docs/install/yew/), or77 [Zola](https://daisyui.com/docs/install/zola/).7879Use the file paths and integration steps in the selected guide. Each framework can use a different CSS entry.
melumuccu