daisyUI：最受欢迎的 Tailwind CSS 组件库

daisyUI 是 Tailwind CSS 最流行的组件库插件，通过语义化类名让开发者大幅减少代码量，提升开发效率。目前在 GitHub 上已获得超过 40,000 stars，每周 NPM 下载量超过 59 万次，被 43 万个开源项目使用。

为什么选择 daisyUI

在传统的 Tailwind CSS 项目中，开发者需要为每个元素编写大量的 utility class 名称，仅仅是为了样式化最基本的元素，就可能需要写上千个类名。

传统 Tailwind 写法的问题

对于每个元素、每个页面、每个项目，都需要重复编写类似的类名组合：

<div class="w-80 rounded-lg bg-zinc-50 text-zinc-800">
  <div class="flex flex-col gap-3 p-8">
    <input placeholder="Email" class="w-full rounded-sm border border-zinc-300 bg-white px-3 py-2 text-sm focus:ring-2 focus:ring-zinc-700 focus:ring-offset-2 focus:ring-offset-zinc-100 focus:outline-none focus-visible:border-zinc-900"/>
    <button class="inline-block cursor-pointer rounded-sm bg-zinc-900 px-4 py-2.5 text-center text-sm font-semibold text-white shadow-[0_.2rem_0.3rem_-.25rem_black] active:shadow-none transition duration-200 ease-in-out">
      Save
    </button>
  </div>
</div>

daisyUI 的解决方案

使用语义化类名，代码更简洁、更易维护：

<div class="card w-80 bg-base-100 shadow-xl">
  <div class="card-body">
    <input type="text" placeholder="Email" class="input input-bordered" />
    <button class="btn btn-primary">Save</button>
  </div>
</div>

核心优势

1. 开发效率提升 88%

使用 daisyUI 后，你可以减少 88% 的类名编写量，HTML 体积减少约 79%。

2. 高度可定制

daisyUI 基于 Tailwind CSS 构建，你可以使用 Tailwind 的 utility classes 来自定义任何组件：

<!-- 基础按钮 -->
<a class="btn btn-primary">Button</a>

<!-- 自定义圆角 -->
<a class="btn btn-primary rounded-full">Button</a>

3. 纯 CSS，无 JS 依赖

daisyUI 是一个 Tailwind CSS 插件，不依赖任何 JavaScript 框架。它可以在所有 JS 框架中工作：

• React / Next.js
• Vue / Nuxt.js
• Svelte / SvelteKit
• Angular
• SolidJS / Preact
• Laravel / Rails
• Astro / Qwik
• Phoenix 等

4. 无限主题支持

daisyUI 添加了一套可自定义的颜色名称到 Tailwind CSS，这些颜色使用 CSS 变量作为值。使用 daisyUI 的颜色名称，你可以轻松实现暗黑模式和更多主题，而无需添加新的类名。

语义化颜色系统：

• primary / primary-content
• secondary / secondary-content
• accent / accent-content
• neutral / neutral-content
• base-100 / base-200 / base-300 / base-content
• info / success / warning / error

内置 30+ 主题，包括：light、dark、cupcake、bumblebee、emerald、corporate、synthwave、retro、cyberpunk、valentine、halloween、garden、forest、aqua、lofi、pastel、fantasy、wireframe、black、luxury、dracula 等。

5. 丰富的组件库

daisyUI 提供 65+ 组件，500+ utility classes：

• 基础元素：Button、Badge、Avatar、Card、Alert
• 表单组件：Input、Textarea、Select、Checkbox、Radio、Toggle、Range
• 导航组件：Navbar、Menu、Breadcrumbs、Pagination、Tabs、Steps
• 数据展示：Table、Stats、Collapse、Accordion、Carousel
• 反馈组件：Modal、Toast、Tooltip、Popover、Dropdown
• 布局组件：Drawer、Hero、Stack、Divider、Skeleton

安装使用

安装

npm i -D daisyui@latest

配置

在 tailwind.config.js 中添加：

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
}

使用组件

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-accent">Accent Button</button>

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">Shoes!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

企业用户

daisyUI 被众多知名企业使用：

• Meta - 用于 Chameleon 和 SAM 2 项目
• Alibaba - 用于 Arthas 项目
• Amazon - 用于 Amazon IVS 和 aws-samples
• Adobe - 用于 Adobe Nala 站点
• Pepsico - 内部项目
• Google Cloud - 用于 RAD Lab

开发者评价

"daisyUI saved me months of component design" — Erick Rodriguez, Software Engineer

"daisyUI 5 + Tailwind CSS 4 is just an amazing combo for fast and high-end results" — Nacho Herrera, Developer

"DaisyUI just looks amazing." — Kelvin Htat, Solo founder

"daisyUI is such a time saver" — Ollie The Dev, Amplify UI

"daisyUI is underrated. The best mix of Bootstrap (semantic) + Tailwind (utility)." — Kaleb Lape, Rails developer

相关资源

• 官方网站：https://daisyui.com/
• GitHub：https://github.com/saadeghi/daisyui
• 组件文档：https://daisyui.com/components/
• 主题生成器：https://daisyui.com/theme-generator/
• 安装指南：https://daisyui.com/docs/install/

总结

daisyUI 是 Tailwind CSS 生态中最受欢迎的组件库，它完美平衡了语义化类名的简洁性和 utility-first 的灵活性。通过使用 daisyUI，开发者可以：

1. 减少 88% 的类名编写
2. 获得 65+ 即用组件
3. 支持 30+ 内置主题
4. 零 JavaScript 依赖
5. 兼容所有主流框架

如果你正在使用 Tailwind CSS，daisyUI 是提升开发效率的最佳选择。