daisyui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

daisyUI Component Library

daisyUI 组件库

Use this skill when building user interfaces with daisyUI and Tailwind CSS, implementing UI components, or configuring themes.

当你使用daisyUI和Tailwind CSS构建用户界面、实现UI组件或配置主题时，可以使用本指南。

When to Use This Skill

什么时候使用该指南

Activate when:

Building UI components with daisyUI
Choosing appropriate daisyUI components for design needs
Implementing responsive layouts with daisyUI
Configuring or customizing themes
Converting designs to daisyUI components
Troubleshooting daisyUI component styling

在以下场景中启用：

使用daisyUI构建UI组件
根据设计需求选择合适的daisyUI组件
使用daisyUI实现响应式布局
配置或自定义主题
将设计稿转换为daisyUI组件
排查daisyUI组件的样式问题

What is daisyUI?

什么是daisyUI？

daisyUI is a Tailwind CSS component library providing:

Semantic component classes - High-level abstractions of Tailwind utilities
33+ built-in themes - Light, dark, and creative theme variants
Framework-agnostic - Works with any HTML/CSS project
Utility-first compatible - Combine components with Tailwind utilities

daisyUI是一款Tailwind CSS组件库，提供以下能力：

语义化组件类 - Tailwind工具类的高层抽象
33+内置主题 - 浅色、深色及创意主题变体
框架无关 - 可在任意HTML/CSS项目中使用
兼容工具优先理念 - 可将组件与Tailwind工具类结合使用

Installation

安装

Add daisyUI to your project:

bash

npm install -D daisyui@latest

Configure

tailwind.config.js

javascript

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

For detailed installation options and CDN usage, see

references/installation.md

将daisyUI添加到你的项目中：

bash

npm install -D daisyui@latest

配置

tailwind.config.js

：

javascript

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

如需了解详细的安装选项和CDN使用方式，请查看

references/installation.md

。

Component Categories

组件分类

daisyUI provides components across these categories:

Actions: Buttons, dropdowns, modals, swap
Data Display: Cards, badges, tables, carousels, stats
Data Input: Input, textarea, select, checkbox, radio, toggle
Navigation: Navbar, menu, tabs, breadcrumbs, pagination
Feedback: Alert, progress, loading, toast, tooltip
Layout: Drawer, footer, hero, stack, divider

For component-specific guidance, consult the appropriate reference file.

daisyUI提供以下分类的组件：

操作类：按钮、下拉菜单、模态框、swap
数据展示类：卡片、徽章、表格、轮播图、统计组件
数据输入类：输入框、文本域、选择器、复选框、单选框、开关
导航类：导航栏、菜单、标签页、面包屑、分页
反馈类：警告提示、进度条、加载状态、吐司提示、工具提示
布局类：抽屉、页脚、英雄区、堆栈、分割线

如需特定组件的使用指南，请查阅对应的参考文件。

Quick Usage

快速使用

Basic Button

基础按钮

html

<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

html

<button class="btn">Button</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>

Card Component

卡片组件

html

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

html

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

Modal

模态框

html

<button class="btn" onclick="my_modal.showModal()">Open Modal</button>

<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal Title</h3>
    <p class="py-4">Modal content here</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

html

<button class="btn" onclick="my_modal.showModal()">Open Modal</button>

<dialog id="my_modal" class="modal">
  <div class="modal-box">
    <h3 class="font-bold text-lg">Modal Title</h3>
    <p class="py-4">Modal content here</p>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

Theming

主题配置

Using Built-in Themes

使用内置主题

Set theme via HTML attribute:

html

<html data-theme="cupcake">

Available themes: light, dark, cupcake, bumblebee, emerald, corporate, synthwave, 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

通过HTML属性设置主题：

html

<html data-theme="cupcake">

可用主题：light, dark, cupcake, bumblebee, emerald, corporate, synthwave, 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

Theme Switching

主题切换

html

<select class="select" data-choose-theme>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="cupcake">Cupcake</option>
</select>

For advanced theming and customization, see

references/theming.md

html

<select class="select" data-choose-theme>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
  <option value="cupcake">Cupcake</option>
</select>

如需了解高级主题配置和自定义方法，请查看

references/theming.md

。

Responsive Design

响应式设计

daisyUI components work with Tailwind's responsive prefixes:

html

<button class="btn btn-sm md:btn-md lg:btn-lg">
  Responsive Button
</button>

<div class="card w-full md:w-96">
  <!-- Responsive card -->
</div>

daisyUI组件支持Tailwind的响应式前缀：

html

<button class="btn btn-sm md:btn-md lg:btn-lg">
  Responsive Button
</button>

<div class="card w-full md:w-96">
  <!-- Responsive card -->
</div>

When to Consult References

何时查阅参考文档

Installation details: Read
```
references/installation.md
```
Complete component list: Read
```
references/components.md
```
Theming and customization: Read
```
references/theming.md
```
Layout patterns: Read
```
references/layouts.md
```
Form components: Read
```
references/forms.md
```
Common patterns: Read
```
references/patterns.md
```

安装详情：阅读
```
references/installation.md
```
完整组件列表：阅读
```
references/components.md
```
主题配置与自定义：阅读
```
references/theming.md
```
布局模式：阅读
```
references/layouts.md
```
表单组件：阅读
```
references/forms.md
```
通用模式：阅读
```
references/patterns.md
```

Combining with Tailwind Utilities

与Tailwind工具类结合使用

daisyUI semantic classes combine with Tailwind utilities:

html

<!-- daisyUI component + Tailwind utilities -->
<button class="btn btn-primary shadow-lg hover:shadow-xl transition-all">
  Enhanced Button
</button>

<div class="card bg-base-100 border-2 border-primary rounded-lg p-4">
  <!-- Card with custom styling -->
</div>

daisyUI的语义化类可以和Tailwind工具类结合使用：

html

<!-- daisyUI component + Tailwind utilities -->
<button class="btn btn-primary shadow-lg hover:shadow-xl transition-all">
  Enhanced Button
</button>

<div class="card bg-base-100 border-2 border-primary rounded-lg p-4">
  <!-- Card with custom styling -->
</div>

Key Principles

核心原则

Semantic over utility: Use component classes for common patterns
Utility for customization: Apply Tailwind utilities for unique styling
Theme-aware: Components adapt to theme colors automatically
Accessible: Components follow accessibility best practices
Composable: Combine components to build complex UIs

语义化优先于工具类：通用模式使用组件类
工具类用于自定义：使用Tailwind工具类实现独特样式
主题感知：组件会自动适配主题颜色
可访问：组件遵循可访问性最佳实践
可组合：组合多个组件构建复杂UI

Pro Tips

使用技巧

Use
```
btn-{size}
```
modifiers:
```
btn-xs
```
,
```
btn-sm
```
,
```
btn-md
```
,
```
btn-lg
```
Add
```
btn-outline
```
for outlined button variants
Use
```
badge
```
component for status indicators
Combine
```
modal
```
with
```
modal-backdrop
```
for better UX
Use
```
drawer
```
for mobile navigation patterns
Leverage
```
stats
```
component for dashboard metrics
Use
```
loading
```
class on buttons for async operations

使用
```
btn-{size}
```
修饰符：
```
btn-xs
```
、
```
btn-sm
```
、
```
btn-md
```
、
```
btn-lg
```
添加
```
btn-outline
```
实现外边框按钮变体
使用
```
badge
```
组件作为状态指示器
将
```
modal
```
与
```
modal-backdrop
```
结合使用提升用户体验
使用
```
drawer
```
实现移动端导航模式
利用
```
stats
```
组件实现大盘指标展示
在按钮上添加
```
loading
```
类用于异步操作状态