ByteNoteByteNote
字

字节笔记本

2026年2月22日

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

#开源工具

daisyUI 是一个广受欢迎的 Tailwind CSS 插件，为开发者提供语义化的组件类名，帮助减少代码量并加速开发流程。它在 GitHub 上拥有 41,000+ stars，每周 NPM 下载量超过 611,000 次，被广泛应用于 430,000+ 个开源项目中。

核心特性

1. 语义化类名

传统的 Tailwind CSS 开发需要为每个元素编写大量的 utility class，例如一个简单的按钮可能需要十几个类名。而 daisyUI 提供语义化的类名如 btn、card、toggle 等，让代码更易读、更易维护。

对比示例：

纯 Tailwind CSS（114 个类名）：

html
<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"/>
    <label class="flex cursor-pointer items-center text-sm gap-1.5 text-zinc-500">
      <!-- 复杂的 checkbox 样式 -->
    </label>
    <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 focus-visible:ring-2 focus-visible:ring-zinc-700 focus-visible:ring-offset-2 focus-visible:outline-none active:translate-y-[1px]">
      Save
    </button>
  </div>
</div>

Tailwind + daisyUI（仅 14 个类名）：

html
<div class="card w-80">
  <div class="card-body">
    <input type="text" placeholder="Email" class="input input-bordered"/>
    <label class="label cursor-pointer">
      <input type="checkbox" class="toggle"/>
      <span class="label-text">Submit to newsletter</span>
    </label>
    <button class="btn btn-primary">Save</button>
  </div>
</div>

使用 daisyUI 后，类名数量减少 88%，HTML 文件大小减少约 79%。

2. 丰富的组件库

daisyUI 提供了 50+ 个常用 UI 组件：

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

3. 无限主题支持

daisyUI 内置了 30+ 款精美主题，包括：

  • 默认主题：light、dark、cupcake、bumblebee、emerald
  • 流行主题：corporate、synthwave、retro、cyberpunk、valentine
  • 专业主题：business、acid、lemonade、night、coffee

主题切换无需修改类名，只需更改配置即可全局生效。同时支持暗黑模式自动切换。

4. 语义化颜色系统

daisyUI 扩展了 Tailwind 的颜色系统，添加了语义化颜色名：

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

这些颜色使用 CSS 变量，主题切换时自动更新。

5. 框架无关

daisyUI 是纯 CSS 解决方案，无需 JavaScript，支持所有主流框架：

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

安装指南

使用 npm/yarn/pnpm 安装

bash
# npm
npm i -D daisyui@latest

# yarn
yarn add -D daisyui@latest

# pnpm
pnpm add -D daisyui@latest

配置 Tailwind CSS

在 tailwind.config.js 中添加 daisyUI 插件：

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

启用主题（可选）

javascript
module.exports = {
  // ...
  daisyui: {
    themes: ["light", "dark", "cupcake"],
  },
}

快速开始

安装完成后，直接在 HTML 中使用 daisyUI 类名：

html
<!DOCTYPE html>
<html data-theme="light">
<head>
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <!-- 按钮组件 -->
  <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="https://picsum.photos/400/200" alt="Shoes" />
    </figure>
    <div class="card-body">
      <h2 class="card-title">Card Title</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>
</body>
</html>

企业用户

daisyUI 已被众多知名企业采用：

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

相关资源

总结

daisyUI 通过提供语义化的组件类名，解决了 Tailwind CSS 开发中代码冗长、难以维护的问题。它不仅让 HTML 更简洁，还提供了丰富的主题系统和组件库，是提升 Tailwind CSS 开发效率的绝佳选择。无论是个人项目还是企业级应用，daisyUI 都能帮助你更快构建美观的用户界面。

开源工具
上一篇

Claude Code Viewer - Web 端 Claude Code 客户端

下一篇

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

分享: