daisyui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

daisyUI 5

Overview

概述

daisyUI 5 is a CSS component library for Tailwind CSS 4 that provides class names for common UI components. Use it to rapidly build consistent, accessible, and theme-aware web interfaces.

daisyUI 5是适用于Tailwind CSS 4的CSS组件库，为常见UI组件提供类名。使用它可以快速构建样式一致、符合无障碍标准且支持主题切换的Web界面。

Installation

安装

daisyUI 5 requires Tailwind CSS 4. The

tailwind.config.js

file is deprecated in Tailwind CSS v4.

Install via npm:

bash

npm i -D daisyui@latest

Add to your CSS file:

css

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

Or use CDN:

html

<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>

daisyUI 5需要Tailwind CSS 4环境。Tailwind CSS v4中已弃用

tailwind.config.js

文件。

通过npm安装：

bash

npm i -D daisyui@latest

在CSS文件中引入：

css

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

或使用CDN：

html

<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>

Configuration

配置

Basic Config

基础配置

No config needed - use defaults:

css

@plugin "daisyui";

无需额外配置，直接使用默认设置：

css

@plugin "daisyui";

Light Theme Only

仅启用亮色主题

css

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

css

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

With Dark Mode

启用暗色模式

css

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

css

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

All Built-in Themes

启用所有内置主题

css

@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;
}

Set theme on HTML element:

html

<html data-theme="cupcake">

css

@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

<html data-theme="cupcake">

Custom Theme

自定义主题

Use the theme generator at https://daisyui.com/theme-generator/ or create manually:

css

@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;
}

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

css

@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;
}

Usage Rules

使用规则

Add daisyUI class names to HTML elements (component + part + modifier classes)
Customize with Tailwind utilities (e.g.,
```
btn px-10
```
)
Use
```
!
```
suffix for specificity issues as last resort (e.g.,
```
bg-red-500!
```
)
If component doesn't exist, build with Tailwind utilities
Make layouts responsive with Tailwind prefixes (e.g.,
```
sm:card-horizontal
```
)
Only use daisyUI class names or Tailwind utility classes
Ideally no custom CSS needed

为HTML元素添加daisyUI类名（组件+部件+修饰符类）
使用Tailwind工具类进行自定义（例如：
```
btn px-10
```
）
仅在万不得已时使用
```
!
```
后缀解决优先级问题（例如：
```
bg-red-500!
```
）
如果所需组件不存在，使用Tailwind工具类自行构建
使用Tailwind前缀实现响应式布局（例如：
```
sm:card-horizontal
```
）
仅使用daisyUI类名或Tailwind工具类
理想情况下无需编写自定义CSS

Additional Guidelines

额外指南

Use https://picsum.photos/{width}/{height} for placeholder images
Don't add custom fonts unless necessary
Don't add
```
bg-base-100 text-base-content
```
to body unless necessary
For design decisions, follow Refactoring UI book best practices

使用https://picsum.photos/{width}/{height}获取占位图片
非必要情况下不要添加自定义字体
非必要情况下不要为body添加
```
bg-base-100 text-base-content
```
设计决策遵循《Refactoring UI》书籍中的最佳实践

Class Name Categories

类名分类

daisyUI class names fall into these categories (reference only, not used in code):

```
component
```
- Required component class (e.g.,
```
btn
```
,
```
card
```
)
```
part
```
- Child part of component (e.g.,
```
card-title
```
,
```
card-body
```
)
```
style
```
- Specific style (e.g.,
```
btn-outline
```
,
```
alert-soft
```
)
```
behavior
```
- Changes behavior (e.g.,
```
btn-active
```
,
```
btn-disabled
```
)
```
color
```
- Sets color (e.g.,
```
btn-primary
```
,
```
alert-error
```
)
```
size
```
- Sets size (e.g.,
```
btn-sm
```
,
```
input-lg
```
)
```
placement
```
- Sets placement (e.g.,
```
dropdown-top
```
,
```
modal-middle
```
)

direction

- Sets direction (e.g.,

tabs-horizontal

carousel-vertical

)

```
modifier
```
- Modifies component (e.g.,
```
btn-wide
```
,
```
card-side
```
)

variant

- Utility prefixes with syntax

variant:utility-class

(e.g.,

is-drawer-open:w-64

)

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

）

Color System

色彩系统

Semantic Color Names

语义化色彩名称

```
primary
```
/
```
primary-content
```
- Main brand color
```
secondary
```
/
```
secondary-content
```
- Secondary brand color
```
accent
```
/
```
accent-content
```
- Accent color
```
neutral
```
/
```
neutral-content
```
- Neutral UI elements
```
base-100
```
- Base surface color (blank backgrounds)
```
base-200
```
- Darker shade for elevations
```
base-300
```
- Even darker shade for elevations
```
base-content
```
- Foreground content color
```
info
```
/
```
info-content
```
- Informational messages
```
success
```
/
```
success-content
```
- Success states
```
warning
```
/
```
warning-content
```
- Warning states
```
error
```
/
```
error-content
```
- Error states

```
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
```
- 错误状态色彩

Color Rules

色彩规则

daisyUI colors are theme-aware and change with theme
No need for
```
dark:
```
prefix with daisyUI colors
Tailwind colors like
```
red-500
```
stay same on all themes
Avoid Tailwind text colors like
```
text-gray-800
```
- unreadable on dark themes
```
*-content
```
colors have good contrast on their associated colors
Use
```
base-*
```
colors for majority of page
Use
```
primary
```
color for important elements

daisyUI色彩支持主题切换，会随主题变化
使用daisyUI色彩时无需添加
```
dark:
```
前缀
Tailwind原生色彩（如
```
red-500
```
）在所有主题中保持不变
避免使用Tailwind原生文本色（如
```
text-gray-800
```
），这类颜色在暗色主题下可能难以阅读
```
*-content
```
系列色彩与对应主色具有良好的对比度
页面大部分区域使用
```
base-*
```
色彩
重要元素使用
```
primary
```
主色调

Common Components

常用组件

Button

按钮

html

<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>

html

<button class="btn btn-primary">点击我</button>
<button class="btn btn-outline btn-secondary">取消</button>
<button class="btn btn-sm">小尺寸</button>
<button class="btn btn-lg">大尺寸</button>

Input

输入框

html

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

html

<input type="text" placeholder="在此输入" class="input input-bordered" />

Card

卡片

html

<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>

html

<div class="card bg-base-100 shadow-sm">
  <figure><img src="https://picsum.photos/400/250" alt="卡片图片" /></figure>
  <div class="card-body">
    <h2 class="card-title">标题</h2>
    <p>内容</p>
    <div class="card-actions">
      <button class="btn btn-primary">操作</button>
    </div>
  </div>
</div>

Modal

模态框

html

<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>

html

<button onclick="my_modal.showModal()">打开</button>
<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold">标题</h3>
    <p>内容</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">关闭</button>
      </form>
    </div>
  </div>
</dialog>

Alert

提示框

html

<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>

html

<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>错误提示</span>
</div>

Navbar

导航栏

html

<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>

html

<div class="navbar bg-base-200">
  <div class="navbar-start">Logo</div>
  <div class="navbar-center">标题</div>
  <div class="navbar-end">菜单</div>
</div>

Drawer

抽屉

html

<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>
    <!-- Page content -->
  </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>

html

<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">打开抽屉</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>项目1</a></li>
      <li><a>项目2</a></li>
    </ul>
  </div>
</div>

Resources

资源

references/

Component documentation and detailed examples:

components.md - Complete component reference with all class names, syntax, and usage rules for every daisyUI component (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)

When working with a specific component, read components.md and search for that component's section.

组件文档及详细示例：

components.md - 完整的组件参考文档，包含所有daisyUI组件的类名、语法和使用规则（手风琴、提示框、头像、徽章、面包屑、按钮、日历、卡片、轮播、聊天框、复选框、折叠面板、倒计时、差异对比、分割线、停靠栏、抽屉、下拉菜单、浮动操作按钮、字段集、文件输入框、过滤器、页脚、英雄区、3D悬停效果、悬停画廊、指示器、输入框、组合组件、键盘按键、标签、链接、列表、加载动画、遮罩、菜单、浏览器模拟、代码模拟、手机模拟、窗口模拟、模态框、导航栏、分页、进度条、环形进度条、单选框、滑块、评分、选择器、骨架屏、堆叠组件、统计卡片、状态标识、步骤条、切换组件、标签页、表格、文字旋转、文本域、主题控制器、时间线、提示消息、切换按钮、验证器）

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