daisyui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

DaisyUI

1. Overview

1. 概述

DaisyUI is a CSS component class library for Tailwind CSS. Instead of writing long utility class strings, you use semantic class names like

btn

card

modal

. It provides 65+ components with consistent theming through CSS variables and

data-theme

attributes.

All DaisyUI class references and examples are available through the

frontend-components

MCP server under the

daisyui

framework.

DaisyUI是基于Tailwind CSS的CSS组件类库。无需编写冗长的工具类字符串，你可以使用语义化类名如

btn

、

card

、

modal

。它提供65+个组件，通过CSS变量和

data-theme

属性实现一致的主题配置。

所有DaisyUI类参考和示例均可通过

frontend-components

MCP服务器的

daisyui

框架获取。

2. Installation

2. 安装

bash

npm install daisyui

bash

npm install daisyui

Tailwind CSS v4

css

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

css

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

Tailwind CSS v3

// tailwind.config.js
module.exports = {
  plugins: [require("daisyui")],
}

// tailwind.config.js
module.exports = {
  plugins: [require("daisyui")],
}

3. MCP Workflow

3. MCP工作流程

3.1 Browse All Components

3.1 浏览所有组件

list_components(framework: "daisyui")

Returns all 65 component reference files.

list_components(framework: "daisyui")

返回全部65个组件参考文件。

3.2 Get Component Reference

3.2 获取组件参考

undefined

undefined

Get full class reference + examples for a component

获取组件的完整类参考+示例

get_component(framework: "daisyui", category: "components", component_type: "all", variant: "button") get_component(framework: "daisyui", category: "components", component_type: "all", variant: "card") get_component(framework: "daisyui", category: "components", component_type: "all", variant: "modal")

undefined

undefined

3.3 Search Components

3.3 搜索组件

search_components(query: "input", framework: "daisyui")
search_components(query: "nav", framework: "daisyui")

search_components(query: "input", framework: "daisyui")
search_components(query: "nav", framework: "daisyui")

4. Class Naming Conventions

4. 类命名规范

4.1 Base Classes

4.1 基础类

Every component has a base class that applies the default styles:

Component	Base Class	Purpose
Button	`btn`	Clickable button element
Card	`card`	Content container with padding
Modal	`modal`	Dialog overlay
Drawer	`drawer`	Side panel
Navbar	`navbar`	Top navigation bar
Footer	`footer`	Page footer
Tab	`tab`	Tab navigation item
Badge	`badge`	Small status indicator
Alert	`alert`	Notification banner
Table	`table`	Data table
Menu	`menu`	Vertical or horizontal menu
Dropdown	`dropdown`	Dropdown container
Tooltip	`tooltip`	Hover tooltip
Toggle	`toggle`	Toggle switch
Checkbox	`checkbox`	Checkbox input
Radio	`radio`	Radio input
Input	`input`	Text input field
Select	`select`	Select dropdown
Textarea	`textarea`	Multi-line input
Range	`range`	Range slider
Rating	`rating`	Star rating
Progress	`progress`	Progress bar
Loading	`loading`	Loading spinner
Collapse	`collapse`	Collapsible content
Accordion	`accordion`	Accordion group
Carousel	`carousel`	Image/content slider
Countdown	`countdown`	Timer countdown
Diff	`diff`	Before/after comparison
Divider	`divider`	Content separator
Indicator	`indicator`	Corner badge/notification
Join	`join`	Group items together
Kbd	`kbd`	Keyboard key display
Link	`link`	Styled anchor link
Mask	`mask`	Shape mask for images
Mockup	`mockup-browser` , `mockup-code` , `mockup-phone` , `mockup-window`	Device mockups
Skeleton	`skeleton`	Loading placeholder
Stack	`stack`	Stacked elements
Stat	`stat`	Statistics display
Steps	`steps`	Step indicator
Swap	`swap`	Content toggle
Toast	`toast`	Toast notification
Timeline	`timeline`	Event timeline
Hero	`hero`	Hero section

每个组件都有一个基础类，用于应用默认样式：

组件	基础类	用途
按钮	`btn`	可点击的按钮元素
卡片	`card`	带内边距的内容容器
模态框	`modal`	对话框遮罩层
侧边栏	`drawer`	侧边面板
导航栏	`navbar`	顶部导航栏
页脚	`footer`	页面页脚
标签页	`tab`	标签导航项
徽章	`badge`	小型状态指示器
通知栏	`alert`	通知横幅
表格	`table`	数据表格
菜单	`menu`	垂直或水平菜单
下拉菜单	`dropdown`	下拉容器
提示框	`tooltip`	悬停提示框
切换开关	`toggle`	切换开关
复选框	`checkbox`	复选框输入框
单选框	`radio`	单选框输入框
输入框	`input`	文本输入字段
选择器	`select`	选择下拉框
文本域	`textarea`	多行输入框
滑块	`range`	范围滑块
星级评分	`rating`	星级评分组件
进度条	`progress`	进度条
加载动画	`loading`	加载旋转动画
折叠面板	`collapse`	可折叠内容
手风琴	`accordion`	手风琴组
轮播图	`carousel`	图片/内容轮播器
倒计时	`countdown`	计时器倒计时
差异对比	`diff`	前后内容对比
分隔线	`divider`	内容分隔符
角标指示器	`indicator`	角落徽章/通知标记
组合容器	`join`	将元素组合在一起
按键显示	`kbd`	键盘按键样式显示
链接	`link`	样式化锚点链接
图片遮罩	`mask`	图片形状遮罩
设备样机	`mockup-browser` , `mockup-code` , `mockup-phone` , `mockup-window`	设备样机组件
加载占位符	`skeleton`	加载占位骨架
堆叠容器	`stack`	堆叠元素容器
统计卡片	`stat`	数据统计展示
步骤指示器	`steps`	步骤进度指示器
内容切换	`swap`	内容切换组件
消息提示框	`toast`	轻量消息提示框
时间线	`timeline`	事件时间线
英雄区	`hero`	页面英雄区块

4.2 Color Modifiers

4.2 颜色修饰符

DaisyUI uses semantic color names. Apply with

{component}-{color}

Color	Purpose	Example
`primary`	Main brand action	`btn-primary`
`secondary`	Secondary actions	`btn-secondary`
`accent`	Accent/highlight	`badge-accent`
`neutral`	Neutral/default	`btn-neutral`
`info`	Informational	`alert-info`
`success`	Success state	`alert-success`
`warning`	Warning state	`alert-warning`
`error`	Error/danger state	`alert-error`
`ghost`	Transparent/subtle	`btn-ghost`

DaisyUI使用语义化颜色名称，通过

{component}-{color}

格式应用：

颜色	用途	示例
`primary`	品牌主色调操作	`btn-primary`
`secondary`	次要操作	`btn-secondary`
`accent`	强调/高亮	`badge-accent`
`neutral`	中性/默认	`btn-neutral`
`info`	信息提示	`alert-info`
`success`	成功状态	`alert-success`
`warning`	警告状态	`alert-warning`
`error`	错误/危险状态	`alert-error`
`ghost`	透明/柔和样式	`btn-ghost`

4.3 Size Modifiers

4.3 尺寸修饰符

Consistent sizing across components:

Size	Modifier	Example
Extra small	`-xs`	`btn-xs`
Small	`-sm`	`btn-sm`
Medium (default)	`-md`	`btn-md`
Large	`-lg`	`btn-lg`
Extra large	`-xl`	`btn-xl`

所有组件尺寸保持一致：

尺寸	修饰符	示例
特小	`-xs`	`btn-xs`
小	`-sm`	`btn-sm`
中（默认）	`-md`	`btn-md`
大	`-lg`	`btn-lg`
特大	`-xl`	`btn-xl`

4.4 Style Modifiers

4.4 样式修饰符

Style	Modifier	Example
Outline	`-outline`	`btn-outline`
Dash	`-dash`	`btn-dash`
Soft	`-soft`	`btn-soft`
Ghost	`-ghost`	`btn-ghost`
Link	`-link`	`btn-link`
Glass	`glass`	`btn glass`

样式	修饰符	示例
轮廓	`-outline`	`btn-outline`
虚线边框	`-dash`	`btn-dash`
柔和样式	`-soft`	`btn-soft`
透明样式	`-ghost`	`btn-ghost`
链接样式	`-link`	`btn-link`
玻璃态	`glass`	`btn glass`

4.5 Shape Modifiers

4.5 形状修饰符

Shape	Modifier	Example
Wide	`-wide`	`btn-wide`
Block (full width)	`-block`	`btn-block`
Square (1:1)	`-square`	`btn-square`
Circle	`-circle`	`btn-circle`

形状	修饰符	示例
宽版	`-wide`	`btn-wide`
块级（全屏宽）	`-block`	`btn-block`
方形（1:1）	`-square`	`btn-square`
圆形	`-circle`	`btn-circle`

5. Theming

5. 主题配置

5.1 Built-in Themes

5.1 内置主题

DaisyUI includes 30+ built-in themes. Apply with

data-theme

attribute:

html

<html data-theme="light">
<html data-theme="dark">
<html data-theme="cupcake">
<html data-theme="retro">
<html data-theme="cyberpunk">
<html data-theme="valentine">
<html data-theme="garden">
<html data-theme="forest">
<html data-theme="lofi">
<html data-theme="dracula">
<html data-theme="business">
<html data-theme="night">

DaisyUI包含30+个内置主题，通过

data-theme

属性应用：

html

<html data-theme="light">
<html data-theme="dark">
<html data-theme="cupcake">
<html data-theme="retro">
<html data-theme="cyberpunk">
<html data-theme="valentine">
<html data-theme="garden">
<html data-theme="forest">
<html data-theme="lofi">
<html data-theme="dracula">
<html data-theme="business">
<html data-theme="night">

5.2 Theme Scope

5.2 主题作用域

Themes can be scoped to any element, not just

<html>

html

<div data-theme="dark">
  <!-- Dark themed section -->
  <button class="btn btn-primary">Dark button</button>
</div>
<div data-theme="light">
  <!-- Light themed section -->
  <button class="btn btn-primary">Light button</button>
</div>

主题可以作用于任意元素，而不仅仅是

<html>

：

html

<div data-theme="dark">
  <!-- 深色主题区域 -->
  <button class="btn btn-primary">深色按钮</button>
</div>
<div data-theme="light">
  <!-- 浅色主题区域 -->
  <button class="btn btn-primary">浅色按钮</button>
</div>

5.3 Custom Themes

5.3 自定义主题

Define custom themes using CSS variables with OKLch color values:

css

[data-theme="mytheme"] {
  --color-primary: oklch(65% 0.25 260);
  --color-primary-content: oklch(98% 0 0);
  --color-secondary: oklch(70% 0.2 180);
  --color-secondary-content: oklch(98% 0 0);
  --color-accent: oklch(75% 0.18 80);
  --color-accent-content: oklch(20% 0 0);
  --color-neutral: oklch(30% 0.02 260);
  --color-neutral-content: oklch(95% 0 0);
  --color-base-100: oklch(98% 0.01 260);
  --color-base-200: oklch(95% 0.01 260);
  --color-base-300: oklch(90% 0.01 260);
  --color-base-content: oklch(20% 0.02 260);
  --color-info: oklch(70% 0.15 230);
  --color-success: oklch(70% 0.2 150);
  --color-warning: oklch(80% 0.18 80);
  --color-error: oklch(65% 0.25 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

使用OKLch颜色值的CSS变量定义自定义主题：

css

[data-theme="mytheme"] {
  --color-primary: oklch(65% 0.25 260);
  --color-primary-content: oklch(98% 0 0);
  --color-secondary: oklch(70% 0.2 180);
  --color-secondary-content: oklch(98% 0 0);
  --color-accent: oklch(75% 0.18 80);
  --color-accent-content: oklch(20% 0 0);
  --color-neutral: oklch(30% 0.02 260);
  --color-neutral-content: oklch(95% 0 0);
  --color-base-100: oklch(98% 0.01 260);
  --color-base-200: oklch(95% 0.01 260);
  --color-base-300: oklch(90% 0.01 260);
  --color-base-content: oklch(20% 0.02 260);
  --color-info: oklch(70% 0.15 230);
  --color-success: oklch(70% 0.2 150);
  --color-warning: oklch(80% 0.18 80);
  --color-error: oklch(65% 0.25 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

5.4 CSS Variables Reference

5.4 CSS变量参考

Variable	Purpose
`--color-primary`	Primary brand color
`--color-primary-content`	Text on primary
`--color-secondary`	Secondary color
`--color-accent`	Accent color
`--color-neutral`	Neutral color
`--color-base-100`	Base background
`--color-base-200`	Slightly darker bg
`--color-base-300`	Even darker bg
`--color-base-content`	Text on base
`--color-info`	Info state
`--color-success`	Success state
`--color-warning`	Warning state
`--color-error`	Error state
`--radius-selector`	Border radius for selectors
`--radius-field`	Border radius for fields
`--radius-box`	Border radius for boxes

变量	用途
`--color-primary`	品牌主色调
`--color-primary-content`	主色调上的文本颜色
`--color-secondary`	次要颜色
`--color-accent`	强调颜色
`--color-neutral`	中性颜色
`--color-base-100`	基础背景色
`--color-base-200`	稍深的基础背景色
`--color-base-300`	更深的基础背景色
`--color-base-content`	基础背景上的文本颜色
`--color-info`	信息状态颜色
`--color-success`	成功状态颜色
`--color-warning`	警告状态颜色
`--color-error`	错误状态颜色
`--radius-selector`	选择器组件的圆角
`--radius-field`	输入字段的圆角
`--radius-box`	容器组件的圆角

6. Common Component Patterns

6. 常用组件模式

6.1 Card with Actions

6.1 带操作按钮的卡片

html

<div class="card bg-base-100 shadow-xl">
  <figure><img src="..." alt="..." /></figure>
  <div class="card-body">
    <h2 class="card-title">Title</h2>
    <p>Description text</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>

html

<div class="card bg-base-100 shadow-xl">
  <figure><img src="..." alt="..." /></figure>
  <div class="card-body">
    <h2 class="card-title">标题</h2>
    <p>描述文本</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">操作</button>
    </div>
  </div>
</div>

6.2 Modal

6.2 模态框

html

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

html

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

6.3 Navbar

6.3 导航栏

html

<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">Brand</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>Link 1</a></li>
      <li><a>Link 2</a></li>
    </ul>
  </div>
</div>

html

<div class="navbar bg-base-100">
  <div class="flex-1">
    <a class="btn btn-ghost text-xl">品牌</a>
  </div>
  <div class="flex-none">
    <ul class="menu menu-horizontal px-1">
      <li><a>链接1</a></li>
      <li><a>链接2</a></li>
    </ul>
  </div>
</div>

6.4 Form Group

6.4 表单组

html

<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">Email</span>
  </label>
  <input type="email" placeholder="email@example.com" class="input input-bordered w-full max-w-xs" />
  <label class="label">
    <span class="label-text-alt">Helper text</span>
  </label>
</div>

html

<div class="form-control w-full max-w-xs">
  <label class="label">
    <span class="label-text">邮箱</span>
  </label>
  <input type="email" placeholder="email@example.com" class="input input-bordered w-full max-w-xs" />
  <label class="label">
    <span class="label-text-alt">辅助文本</span>
  </label>
</div>

6.5 Drawer Layout

6.5 侧边栏布局

html

<div class="drawer lg:drawer-open">
  <input id="drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- Page content -->
    <label for="drawer" class="btn btn-primary drawer-button lg:hidden">Menu</label>
  </div>
  <div class="drawer-side">
    <label for="drawer" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 text-base-content 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="drawer" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content">
    <!-- 页面内容 -->
    <label for="drawer" class="btn btn-primary drawer-button lg:hidden">菜单</label>
  </div>
  <div class="drawer-side">
    <label for="drawer" class="drawer-overlay"></label>
    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li><a>项1</a></li>
      <li><a>项2</a></li>
    </ul>
  </div>
</div>

7. Responsive Patterns

7. 响应式布局模式

DaisyUI classes work with Tailwind's responsive prefixes:

html

<!-- Small button on mobile, large on desktop -->
<button class="btn btn-sm lg:btn-lg">Responsive</button>

<!-- Stack on mobile, horizontal on desktop -->
<div class="flex flex-col lg:flex-row gap-4">
  <div class="card bg-base-100 shadow">...</div>
  <div class="card bg-base-100 shadow">...</div>
</div>

DaisyUI类可与Tailwind的响应式前缀配合使用：

html

<!-- 移动端显示小按钮，桌面端显示大按钮 -->
<button class="btn btn-sm lg:btn-lg">响应式按钮</button>

<!-- 移动端堆叠布局，桌面端水平布局 -->
<div class="flex flex-col lg:flex-row gap-4">
  <div class="card bg-base-100 shadow">...</div>
  <div class="card bg-base-100 shadow">...</div>
</div>

8. Combining with Tailwind Utilities

8. 与Tailwind工具类结合使用

DaisyUI classes and Tailwind utility classes work together:

html

<button class="btn btn-primary w-full mt-4 shadow-lg">
  Full width primary button with margin and shadow
</button>

<div class="card bg-base-100 shadow-xl max-w-md mx-auto">
  Centered card with max width
</div>

DaisyUI类和Tailwind工具类可以兼容使用：

html

<button class="btn btn-primary w-full mt-4 shadow-lg">
  带外边距和阴影的全宽主按钮
</button>

<div class="card bg-base-100 shadow-xl max-w-md mx-auto">
  居中显示的固定最大宽度卡片
</div>

9. Anti-Patterns

9. 反模式

Don't	Do Instead
`class="bg-blue-500 text-white px-4 py-2 rounded"` for buttons	`class="btn btn-primary"`
Manually define color schemes	Use `data-theme` and CSS variables
Hard-code colors like `bg-blue-500` for themed elements	Use `bg-primary` , `bg-secondary` , etc.
Mix DaisyUI component classes with conflicting Tailwind utilities	DaisyUI base classes first, then Tailwind overrides
Create custom CSS for standard components	Check DaisyUI component library first

不要这么做	正确做法
为按钮使用 `class="bg-blue-500 text-white px-4 py-2 rounded"`	使用 `class="btn btn-primary"`
手动定义配色方案	使用 `data-theme` 和CSS变量
为主题元素硬编码颜色如 `bg-blue-500`	使用 `bg-primary` 、 `bg-secondary` 等语义化类
将DaisyUI组件类与冲突的Tailwind工具类混合使用	先写DaisyUI基础类，再写Tailwind覆盖类
为标准组件编写自定义CSS	先查看DaisyUI组件库是否已有对应组件

10. Workflow Summary

10. 工作流程总结

Step	Action
1. Identify component	What UI element is needed?
2. Check reference	`get_component(framework: "daisyui", ..., variant: "button")`
3. Use base class	Apply the component's base class
4. Add modifiers	Color, size, style modifiers as needed
5. Add Tailwind	Layer Tailwind utilities for spacing, layout
6. Theme	Set `data-theme` or define custom theme variables

步骤	操作
1. 确定组件需求	需要什么UI元素？
2. 查询参考文档	使用 `get_component(framework: "daisyui", ..., variant: "button")`
3. 应用基础类	添加组件的基础类
4. 添加修饰符	根据需要添加颜色、尺寸、样式修饰符
5. 结合Tailwind工具类	叠加Tailwind工具类实现间距、布局等
6. 配置主题	设置 `data-theme` 或定义自定义主题变量