daisyUI

daisyUI 是 Tailwind CSS 的组件库插件，提供 btn、card、toggle 等语义化类名替代数百条 utility class，内置 40+ 主题且全部基于 CSS 变量实现零 JS 切换，已被 Meta、阿里巴巴、亚马逊、Adobe、百事可乐、Google Cloud 等公司工程师使用。

核心能力：语义类名与代码缩减

daisyUI 将 Tailwind CSS 项目中重复编写的 utility class 封装为语义化组件类名。官网对比显示：相同 UI 片段（输入框+开关+按钮），纯 Tailwind 需 114 个类名、HTML 体积 2110 字节；使用 daisyUI 仅需 14 个类名、427 字节，类名减少 88%，HTML 体积缩小 79%。所有组件类名仍可被 Tailwind 的 utility class 覆盖修改。

• btn / card / toggle：最常用的组件类名，覆盖按钮、卡片、开关等基础 UI
• menu-paged：5.7.0 新增修饰器，支持嵌套菜单的内外导航
• join / drawer / dropdown：v3 引入的复合组件，分别处理元素连接、抽屉布局和下拉菜单
• collapse：支持 details/summary 元素，并兼容 Tailwind utility class 在 colgroup 中的使用

主题系统：40+ 预设与零成本暗色模式

daisyUI 在 Tailwind CSS 中新增一组语义化颜色名（primary / secondary / accent / neutral / info / success / warning / error 及其 content 变体），这些颜色使用 CSS 变量赋值，因此切换主题时无需添加新类名即可实现暗色模式。官网列出 40+ 内置主题，包括 light、dark、cupcake、bumblebee、emerald、corporate、synthwave、retro、cyberpunk、valentine、halloween、garden、forest、aqua、lofi、pastel、fantasy、wireframe、black、luxury、dracula、cmyk、autumn、business、acid、lemonade、night、coffee、winter、dim、nord、sunset、caramellatte、abyss、silk 等。用户可通过 Theme Generator 创建自定义主题。

• 语义色体系：primary / secondary / accent / neutral 等 8 组主色，每组附带 content 色（用于文本/图标）
• base 层级：base-100 / base-200 / base-300 提供背景色阶梯，base-content 控制前景色
• 状态色：info / success / warning / error 各带独立 content 色，确保可读性
• 暗色模式：使用 CSS 变量，无需额外 class 或 JS，主题切换自动生效

版本演进与生态数据

daisyUI 5 于 2026 年发布，兼容 Tailwind CSS 4，采用最新 CSS/HTML 标准。据 v5 发布页数据，该库已被 360,000 个开源项目使用，累计 npm 安装量 1900 万次（周均 35 万次）。版本迭代频繁：5.7.0 新增 menu-paged 修饰器，5.6.x 系列修复了 btn-active 样式、RTL 下的 modal-start/end、iOS 中 fieldset-legend 拉伸等 10+ 项缺陷。

• v5 核心改进：适配 Tailwind CSS 4，重构设计系统与组件尺寸比例
• 升级工具：官方提供 @tailwindcss/upgrade CLI，自动转换 tailwind.config.js 为 CSS 导入方式
• 迁移成本：v4v5 仅约 15 处 HTML 类名变更，按需调整即可
• 社区支持：Discord 服务器提供实时帮助，文档含简体中文等 30+ 语言

框架无关性与安装方式

daisyUI 是纯 CSS 插件，无 JavaScript 依赖，因此可工作在 React、Vue、Svelte、Angular、Next.js、Nuxt、Astro 等所有 JS 框架中。安装仅需两步：npm i -D daisyui@latest，然后在 CSS 文件中添加 @plugin "daisyui"。如需启用特定内置主题，可在 plugin 配置中声明 themes: { light: "--default", dark: "--prefersdark", cupcake: true }。

• 无 JS 包：组件交互（如 drawer、dropdown）依赖 HTML 原生 details/summary 元素，无需额外脚本
• MCP 服务器：v1.5 版本提供 MCP Server，支持通过 AI 工具生成 UI
• Figma 库：提供 Figma 组件库，方便设计与开发对齐
• Playground：在线 playground 可实时测试组件与主题

常见问题

Q1：daisyUI 如何实现 88% 的类名缩减？

A1：官网以「输入框+开关+按钮」表单片段为例：纯 Tailwind 需 114 个 class（如 w-80、rounded-lg、bg-zinc-50、focus:ring-2 等），daisyUI 仅用 14 个语义类名（如 input、toggle、btn），同时 HTML 体积从 2110 字节降至 427 字节。缩减原理是将重复的 utility 组合封装为 btn、card 等单一类名，且仍可通过 Tailwind utility 覆盖细节。

Q2：daisyUI 5 升级到 Tailwind CSS 4 的具体步骤？

A2：官方升级指南分两步：1）从 tailwind.config.js 中移除 daisyUI 插件和主题配置，运行 npx @tailwindcss/upgrade 自动转换；2）安装 daisyUI 5（npm i -D daisyui@latest），在 CSS 文件中用 @import "tailwindcss" 和 @plugin "daisyui" 替代旧配置。如需启用内置主题，在 plugin 后添加 themes 参数，例如 themes: { light: "--default", dark: "--prefersdark" }。

Q3：daisyUI 的主题切换是否需要 JavaScript？

A3：不需要。daisyUI 所有主题颜色均使用 CSS 变量实现，切换主题时只需在 HTML 根元素上更换 data-theme 属性值（如 data-theme="dark"），浏览器自动应用对应 CSS 变量，无需任何 JS 代码。内置 40+ 主题均遵循此机制。

更多同类工具与网站,可在其他框架分类继续挑选。

信息核实于 2026年7月,具体以官网为准。