开发工具精选项目

daisyUI

基于 Tailwind CSS 的纯 CSS 组件库，以语义化类名、丰富组件和多主题系统加速界面开发。

GitHub 访问官网

主要语言CSS

开源许可MIT

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

daisyUI 作为 Tailwind CSS 插件提供 btn、card、modal 等组件类名和语义化主题颜色。它不绑定 React、Vue 等框架，也不需要客户端 JavaScript 包，适合快速构建原型、后台和多主题产品。

daisyUI 是采用 MIT 许可证的 Tailwind CSS 组件库。它在 Tailwind 的 Utility 基础上增加更高层的组件类名、语义化颜色和主题变量，让开发者用 btn、card、input 等短类名获得完整默认样式，再继续叠加 Tailwind Utility 做局部调整。daisyUI 5 面向 Tailwind CSS 4，配置直接写在 CSS 的 @plugin 规则中；生成结果是纯 CSS，因此可以用于 React、Vue、Svelte、Astro、服务端模板或普通 HTML。

当前版本daisyUI 5.7.4

组件数量68 个

内置主题35 个

FEATURES

主要特点

daisyUI 用语义化组件类、主题令牌和纯 CSS 输出减少重复的 Tailwind 组合。

语义化组件类名

使用 btn、card、alert、modal 等易读类名表达组件角色，减少在每个页面重复堆叠大量 Utility。

纯 CSS、框架无关

最终产物不包含 daisyUI 客户端 JavaScript，可在 React、Vue、Svelte、Astro、Laravel、Rails、Django 和普通 HTML 中使用。

丰富组件集合

覆盖按钮、表单、导航、数据展示、反馈、布局和 Mockup 等 68 个组件，并提供尺寸、颜色和状态修饰类。

35 个内置主题

light、dark、cupcake、dracula、nord 等主题通过 CSS 变量统一改变组件颜色，可只启用所需主题以控制输出。

语义化颜色令牌

primary、secondary、accent、neutral、base、info、success、warning 和 error 等名称让组件脱离具体色值。

自定义主题

通过 @plugin "daisyui/theme" 定义 OKLCH 颜色、圆角、尺寸、边框、深度和噪点等设计令牌，形成品牌主题。

主题嵌套与切换

在任意元素上设置 data-theme 即可局部应用主题，也可使用 theme-controller 借助原生表单控件实现无 JavaScript 的主题切换。

Tailwind Utility 可继续叠加

组件类提供结构和默认视觉，开发者仍能直接添加 rounded-full、w-full、md:grid-cols-2 等 Utility 做细节调整。

按需配置输出

themes、include、exclude、prefix 和 root 等选项可限制主题、组件和基础样式，或把变量作用域缩小到指定容器。

USE CASES

适用场景

希望快速获得一致界面，又需要保留 Tailwind 调整能力和跨框架适用性时，daisyUI 很有吸引力。

原型和 MVP

组件默认视觉完整，团队无需先设计每个按钮和表单状态，即可快速验证产品流程。

管理后台与内部工具

菜单、抽屉、表格、统计、表单、弹窗和提示组件适合搭建标准业务界面。

多主题产品

CSS 变量和 data-theme 可支持深浅模式、用户主题、品牌子站或同页主题预览。

跨框架设计基础

同一套类名和主题可以用于不同前端框架及服务端模板，降低多技术栈团队的样式重复建设。

教学与个人项目

语义化类名容易理解，既能快速得到可用界面，也能继续学习 Tailwind Utility 和响应式设计。

内容站与营销页面

Hero、Card、Navbar、Footer、Timeline 和 Mockup 等组件可以快速组合产品介绍与活动页面。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

daisyUI 擅长的地方

组件类名简短易读，显著减少重复的 Tailwind Utility 组合
纯 CSS 且框架无关，不增加组件运行时或绑定特定 JavaScript API
默认组件和状态覆盖广，原型与常规业务页面搭建速度快
内置主题丰富，语义化颜色让深浅模式和品牌切换更直接
可以继续叠加 Tailwind Utility，不会失去局部调整能力
配置集中在 CSS 中，与 Tailwind CSS 4 的 CSS-first 工作流一致
include、exclude、prefix 和 root 便于控制作用域及渐进接入

需要注意

采用前应考虑的问题

它不提供 JavaScript 行为层

daisyUI 主要生成样式。复杂交互的状态、事件、异步流程和框架集成仍需应用实现，或采用原生 dialog、details 等文档结构。

默认视觉容易产生相似感

直接使用内置主题和默认组件可能让不同网站看起来接近。正式产品应调整主题令牌、排版、间距和关键组件。

类名依赖特定结构

Modal、Dropdown、Drawer 等组件通常要求特定层级与配套类名。改变 DOM 结构前应查看组件文档并验证各种状态。

可访问性仍需应用负责

视觉样式不能自动补齐标签、ARIA、焦点恢复、错误说明或动态通知。团队必须对真实交互执行键盘和辅助技术测试。

语义类与 Utility 可能冲突

叠加自定义 Utility 时需要理解 Tailwind 层级、变体和 CSS 优先级，避免依赖脆弱的覆盖顺序。

大版本升级需要检查标记变化

daisyUI 5 与 Tailwind CSS 4 调整了配置方式和部分组件 HTML。旧项目应按升级指南逐项核对，而不是只更新依赖版本。

启用全部主题会增加 CSS

themes: all 会输出所有内置主题。生产应用通常只应启用实际需要的主题，并评估组件与基础样式范围。

品牌设计仍需要系统化治理

更换主题颜色不能替代完整设计系统；字体、内容密度、响应式规则、图标和交互反馈仍需统一规范。

QUICK START

快速开始

下面以 Vite 和 Tailwind CSS 4 为例安装 daisyUI、配置主题并构建一个登录卡片。

1创建 Vite 项目并安装依赖

bash

npm create vite@latest my-daisy-app -- --template vanilla
cd my-daisy-app
npm install
npm install --save-dev tailwindcss @tailwindcss/vite daisyui

2启用 Tailwind CSS Vite 插件

javascript

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

3引入 Tailwind CSS 和 daisyUI

css

@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

4构建登录卡片

html

<main class="grid min-h-screen place-items-center bg-base-200 p-6">
  <section class="card w-full max-w-sm bg-base-100 shadow-xl">
    <div class="card-body">
      <h1 class="card-title">欢迎回来</h1>
      <p class="text-base-content/70">登录后继续浏览你的项目。</p>

      <label class="fieldset">
        <span class="fieldset-legend">邮箱</span>
        <input
          class="input w-full"
          type="email"
          name="email"
          autocomplete="email"
          required
        />
      </label>

      <label class="fieldset">
        <span class="fieldset-legend">密码</span>
        <input
          class="input w-full"
          type="password"
          name="password"
          autocomplete="current-password"
          required
        />
      </label>

      <div class="card-actions mt-2">
        <button class="btn btn-primary w-full" type="submit">登录</button>
      </div>
    </div>
  </section>
</main>

5添加无需 JavaScript 的主题选择器

html

<fieldset class="join" aria-label="选择主题">
  <input
    class="theme-controller btn join-item"
    type="radio"
    name="theme"
    value="light"
    aria-label="浅色"
    checked
  />
  <input
    class="theme-controller btn join-item"
    type="radio"
    name="theme"
    value="dark"
    aria-label="深色"
  />
  <input
    class="theme-controller btn join-item"
    type="radio"
    name="theme"
    value="cupcake"
    aria-label="Cupcake"
  />
</fieldset>

6定义品牌主题

css

@plugin "daisyui/theme" {
  name: "brand";
  default: false;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(98% 0.01 250);
  --color-base-content: oklch(22% 0.04 260);
  --color-primary: oklch(58% 0.22 255);
  --color-primary-content: oklch(98% 0.01 255);
  --color-secondary: oklch(70% 0.18 170);
  --color-secondary-content: oklch(18% 0.03 170);
  --radius-box: 1rem;
  --radius-field: 0.5rem;
}

7启动与构建

bash

npm run dev

# 发布前生成生产资源
npm run build

下一步：daisyUI 只负责 CSS 外观，不会替应用提供状态管理或完整交互逻辑。使用 Modal、Dropdown、Drawer 等组件时，应优先采用文档推荐的原生 HTML 结构，并测试键盘、焦点和屏幕阅读器流程。

ALTERNATIVES

类似项目

这些站内项目与 daisyUI 的 Tailwind 工作流或组件设计方式密切相关；其他纯 CSS 组件方案列为外部参考。

Tailwind CSS

以实用类为核心的 CSS 框架，快速构建定制化界面。

查看项目

shadcn/ui

把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。

查看项目

UnoCSS

高度可定制、即时按需生成样式的原子 CSS 引擎。

查看项目

TweakCN

面向 shadcn/ui 与 Tailwind CSS 的可视化主题编辑器，可实时调整设计令牌并导出 CSS 或 Registry 命令。

查看项目

Flowbite

基于 Tailwind CSS 的组件库，提供交互脚本以及 React、Vue、Svelte 等框架版本。

访问官网

Preline UI

提供 Tailwind CSS 组件、示例与 JavaScript 交互插件的开源界面工具包。

访问官网

Bootstrap

拥有成熟网格、Utility、预制组件和 JavaScript 插件的经典前端工具包。

访问官网

COMPARISON

daisyUI vs shadcn/ui

daisyUI 与 shadcn/ui 都能加快 Tailwind CSS 界面开发，但 daisyUI 以全局 CSS 插件和语义类名提供组件外观，shadcn/ui 则把 React 组件源码复制到项目中。

比较维度	daisyUI	shadcn/ui
核心模式	安装 Tailwind 插件并使用组件类名	通过 CLI 把组件源码加入项目
框架范围	纯 CSS、框架无关	主要面向 React 生态
交互行为	依赖原生 HTML 或由应用自行实现	组件源码结合 Base UI、Radix 或 React Aria 原语
定制方式	主题变量、组件修饰类与 Tailwind Utility	直接修改 React 组件结构、行为和样式源码
主题能力	35 个内置主题，data-theme 可嵌套切换	中性默认值，通常由团队维护 CSS 变量主题
源码所有权	项目使用库生成的 CSS 规则	每个安装组件的源码归项目维护
升级方式	升级 npm 插件并处理样式与标记变化	审阅差异后手动合并或覆盖组件源码
更适合	快速交付、跨框架与多主题产品	React 产品、深度定制和应用级设计系统