CSS 框架 词条目录
前端Wiki/词条/DaisyUI

DaisyUI

定义基于 Tailwind 的组件类库,提供 btn、card 等语义化类与多套预制主题,补齐原子类缺少的成品组件

纯 Tailwind 拼一个按钮要五六个类,拼一个完整模态框要堆几十个类;DaisyUI 在 Tailwind 之上提供 btn、card、navbar、drawer、modal 这类高频语义化类,一行类名出成品,Tailwind 原子类仍可随意混入微调。它还内置数十套配色主题,给 html 标签加 data-theme 属性即可整体切换,包括开箱即用的暗色模式。

DaisyUI 是纯 CSS 组件库,不含任何 JS,下拉、折叠等交互依赖它提供的少量 CSS 状态类或自行实现。它精准命中了 Tailwind 使用者最大的痛点:不想每个按钮从头拼原子类,又不愿意引入 Bulma 这种与 Tailwind 设计语言冲突的传统框架。两者共生而非互斥,是目前 Tailwind 生态最流行的组件层补充。

HTML
<style>
  .btn { display: inline-block; background: #570df8; color: #fff;
         border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
  .btn-secondary { background: #64748b; }
  .card { border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
</style>
<button class="btn">DaisyUI 主按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<div class="card">语义化卡片</div>
⚠ 常见误区
🔗 相关词条暗色模式工具类
← 返回来源章节暗色模式