纯 Tailwind 拼一个按钮要五六个类,拼一个完整模态框要堆几十个类;DaisyUI 在 Tailwind 之上提供 btn、card、navbar、drawer、modal 这类高频语义化类,一行类名出成品,Tailwind 原子类仍可随意混入微调。它还内置数十套配色主题,给 html 标签加 data-theme 属性即可整体切换,包括开箱即用的暗色模式。
DaisyUI 是纯 CSS 组件库,不含任何 JS,下拉、折叠等交互依赖它提供的少量 CSS 状态类或自行实现。它精准命中了 Tailwind 使用者最大的痛点:不想每个按钮从头拼原子类,又不愿意引入 Bulma 这种与 Tailwind 设计语言冲突的传统框架。两者共生而非互斥,是目前 Tailwind 生态最流行的组件层补充。
<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>