安裝 daisyUI 5
- 你必須搭配 daisyUI 5 使用 Tailwind CSS 4。
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 進入點。