SuperAPI AI 工具集

daisyui-install

前端与建站

查看项目

更新于 10-16 14:37

技能介绍

用途:daisyUI 5 的安装与接入指引,说明如何在项目中引入 daisyUI 及其所需的 Tailwind CSS 版本。

前提:必须使用 Tailwind CSS 4 与 daisyUI 5。Tailwind CSS v4 已弃用 tailwind.config.js,不要使用该配置文件。

依赖方式安装:若 Tailwind CSS v4 作为 Node.js 依赖,CSS 文件中只添加 @import "tailwindcss";。安装 daisyUI 5 在项目目录运行 npm i -D daisyui@latest,然后在 CSS 文件中添加 @plugin "daisyui";。当 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: 变体。

其他环境:若使用 Tailwind CSS 独立可执行文件且无 Node.js,请参考 standalone 指南。其余情况按所用框架或构建工具选择对应指南,例如 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 入口可不同,按所选指南中的文件路径与集成步骤操作。

限制:资料未提供具体收费、价格或效果说明。