daisyui

daisyUI 5

概述

daisyUI 5 是一个适用于 Tailwind CSS 4 的 CSS 组件库，为常见 UI 组件提供类名。使用它可以快速构建一致、易于访问且适配主题的 Web 界面。

安装

daisyUI 5 需要 Tailwind CSS 4。tailwind.config.js 文件在 Tailwind CSS v4 中已弃用。

通过 npm 安装：

npm i -D daisyui@latest

添加到 CSS 文件中：

@import "tailwindcss";
@plugin "daisyui";

或者使用 CDN：

<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

配置

基本配置

无需配置——使用默认值：

@plugin "daisyui";

仅浅色主题

@plugin "daisyui" {
  themes: light --default;
}

使用深色模式

@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
  root: ":root";
  include: ;
  exclude: ;
  prefix: ;
  logs: true;
}

所有内置主题

@plugin "daisyui" {
  themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
  root: ":root";
  include: ;
  exclude: rootscrollgutter, checkbox;
  prefix: daisy-;
  logs: false;
}

在 HTML 元素上设置主题：

<html data-theme="cupcake">

自定义主题

使用主题生成器 https://daisyui.com/theme-generator/，或手动创建：

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

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

使用规则

1. 将 daisyUI 类名添加到 HTML 元素中（组件类 + 部件类 + 修饰类）
2. 使用 Tailwind 工具类进行自定义（例如，btn px-10）
3. 遇到优先级问题时，最后再使用 ! 后缀（例如，bg-red-500!）
4. 如果没有对应组件，使用 Tailwind 工具类构建
5. 使用 Tailwind 前缀创建响应式布局（例如，sm:card-horizontal）
6. 仅使用 daisyUI 类名或 Tailwind 工具类
7. 理想情况下无需自定义 CSS

其他指南

• 使用 https://picsum.photos/{width}/{height} 获取占位图片
• 除非必要，否则不要添加自定义字体
• 除非必要，否则不要给 body 添加 bg-base-100 text-base-content
• 做设计决策时，遵循《Refactoring UI》一书中的最佳实践

类别名称

daisyUI 类名分为以下类别（仅供参考，不在代码中使用）：

• component - 必需的组件类（例如，btn、card）
• part - 组件的子部件（例如，card-title、card-body）
• style - 特定样式（例如，btn-outline、alert-soft）
• behavior - 更改行为（例如，btn-active、btn-disabled）
• color - 设置颜色（例如，btn-primary、alert-error）
• size - 设置大小（例如，btn-sm、input-lg）
• placement - 设置位置（例如，dropdown-top、modal-middle）
• direction - 设置方向（例如，tabs-horizontal、carousel-vertical）
• modifier - 修改组件（例如，btn-wide、card-side）
• variant - 使用 variant:utility-class 语法的工具类前缀（例如，is-drawer-open:w-64）

颜色系统

语义颜色名称

• primary / primary-content - 主品牌色
• secondary / secondary-content - 次要品牌色
• accent / accent-content - 强调色
• neutral / neutral-content - 中性色 UI 元素
• base-100 - 基础表面颜色（空白背景）
• base-200 - 用于层级效果的较深色调
• base-300 - 用于层级效果的更深色调
• base-content - 前景内容颜色
• info / info-content - 信息提示
• success / success-content - 成功状态
• warning / warning-content - 警告状态
• error / error-content - 错误状态

颜色规则

• daisyUI 颜色适配主题，会随主题变化
• 使用 daisyUI 颜色时无需添加 dark: 前缀
• red-500 等 Tailwind 颜色在所有主题下保持不变
• 避免使用 text-gray-800 等 Tailwind 文本颜色——在深色主题下难以阅读
• *-content 颜色与对应颜色具有良好的对比度
• 页面的大部分区域使用 base-* 颜色
• 重要元素使用 primary 颜色

常见组件

按钮

<button class="btn btn-primary">Click me</button>
<button class="btn btn-outline btn-secondary">Cancel</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>

输入框

<input type="text" placeholder="Type here" class="input input-bordered" />

卡片

<div class="card bg-base-100 shadow-sm">
  <figure><img src="https://picsum.photos/400/250" alt="Card image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Content</p>
    <div class="card-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

模态框

<button onclick="my_modal.showModal()">Open</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold">Title</h3>
    <p>Content</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

提示框

<div role="alert" class="alert alert-error">
  <svg class="w-6 h-6" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
  <span>Error message</span>
</div>

导航栏

<div class="navbar bg-base-200">
  <div class="navbar-start">Logo</div>
  <div class="navbar-center">Title</div>
  <div class="navbar-end">Menu</div>
</div>

抽屉

<div class="drawer lg:drawer-open">
  <input id="my-drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <label for="my-drawer" class="btn drawer-button lg:hidden">Open drawer</label>
    
  </div>
  <div class="drawer-side">
    <label for="my-drawer" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </div>
</div>

资源

references/

组件文档和详细示例：

• components.md - 完整的组件参考文档，包含每个 daisyUI 组件（accordion、alert、avatar、badge、breadcrumbs、button、calendar、card、carousel、chat、checkbox、collapse、countdown、diff、divider、dock、drawer、dropdown、fab、fieldset、file-input、filter、footer、hero、hover-3d、hover-gallery、indicator、input、join、kbd、label、link、list、loading、mask、menu、mockup-browser、mockup-code、mockup-phone、mockup-window、modal、navbar、pagination、progress、radial-progress、radio、range、rating、select、skeleton、stack、stat、status、steps、swap、tab、table、text-rotate、textarea、theme-controller、timeline、toast、toggle、validator）的所有类名、语法和用法规则。

使用特定组件时，请阅读 components.md 并搜索该组件对应的章节。