daisyUI Install

name: daisyui-install
description: Installation instructions for daisyUI 5

Install daisyUI 5

Installation guide

1. You must use Tailwind CSS 4 with daisyUI 5.
2. 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.
3. To install daisyUI 5, run npm i -D daisyui@latest. Then, add @plugin "daisyui"; to the CSS file.
4. 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>

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