安装 daisyUI 5
- 必须使用 Tailwind CSS 4 和 daisyUI 5。
tailwind.config.js文件在 Tailwind CSS v4 中已弃用。请勿使用tailwind.config.js。如果 Tailwind CSS v4 是 Node.js 依赖项，请仅在 CSS 文件中添加@import "tailwindcss";。- 要安装 daisyUI 5，请运行
npm i -D daisyui@latest。然后在 CSS 文件中添加@plugin "daisyui";。 - 尽可能将 daisyUI 安装为依赖项。如果有特殊原因需要使用 CDN，请使用 Tailwind CSS 和 daisyUI 的 CDN 文件：
<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>
- 如果 Tailwind CSS 和 daisyUI 是 Node.js 依赖项，请使用此 CSS 文件：
@import "tailwindcss";
@plugin "daisyui";
CDN
对于无需安装的浏览器设置，请加载预编译的 daisyUI CSS 和 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>
主要的 CDN 文件包含亮色和暗色主题。要加载所有内置主题，请使用：
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
您也可以从 CDN 组合使用单独的 daisyUI CSS 模块。CDN 文件不包含 is-drawer-open: 和 is-drawer-close: 变体。
独立版和框架特定配置
- 如果您在没有 Node.js 的情况下使用 Tailwind CSS 独立可执行文件，请参考独立版指南。
- 对于其他安装方式，请选择适用于相应框架或构建工具的指南： 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 或 Zola。
请使用所选指南中的文件路径和集成步骤。每个框架可能使用不同的 CSS 入口文件。