daisy-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

daisy-ui

Instructions

使用说明

Follow documentation from ./llms.txt to produce code that uses DaisyUI components and themes according to the project's tech stack and coding standards outlined in the main CLAUDE.md file.

请遵循./llms.txt中的文档，编写符合项目技术栈和主CLAUDE.md文件中编码标准的DaisyUI组件与主题代码。

Theme Customization

主题定制

Configure DaisyUI theme in

tailwind.config.js

for Williamstown SC brand identity:

在

tailwind.config.js

中配置DaisyUI主题，以匹配Williamstown SC的品牌标识：

Primary Colors

主色调

```
primary
```
: #062174 (Club blue - traditional, trustworthy)
```
secondary
```
: #DEB100 (Club yellow/gold - energy, visibility)
```
accent
```
: #10B981 (Green - soccer field aesthetic)
```
neutral
```
: #1F2937 (Dark gray for text)
```
base-100
```
: #FFFFFF (White backgrounds)
```
base-200
```
: #F3F4F6 (Light gray backgrounds)
```
base-300
```
: #E5E7EB (Medium gray borders)

```
primary
```
: #062174（俱乐部蓝色 - 经典、可靠）
```
secondary
```
: #DEB100（俱乐部黄/金色 - 活力、醒目）
```
accent
```
: #10B981（绿色 - 足球场风格）
```
neutral
```
: #1F2937（深灰色文本）
```
base-100
```
: #FFFFFF（白色背景）
```
base-200
```
: #F3F4F6（浅灰色背景）
```
base-300
```
: #E5E7EB（中灰色边框）

Typography Guidelines

排版指南

Use
```
font-sans
```
with system fonts or Inter
Ensure minimum 16px base font size for accessibility
Apply proper line-height (1.5+ for body text)
Use font-weight variations: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)

使用
```
font-sans
```
系统字体或Inter字体
确保基础字体大小最小为16px以满足可访问性要求
应用合适的行高（正文文本行高≥1.5）
使用不同字重：400（常规）、500（中等）、600（半粗体）、700（粗体）

Theme Configuration Example

主题配置示例

// tailwind.config.js
module.exports = {
	plugins: [require('daisyui')],
	daisyui: {
		themes: [
			{
				williamstown: {
					primary: '#062174', // Club blue
					'primary-content': '#FFFFFF',
					secondary: '#DEB100', // Club gold
					'secondary-content': '#000000',
					accent: '#10B981', // Soccer green
					'accent-content': '#FFFFFF',
					neutral: '#1F2937',
					'neutral-content': '#FFFFFF',
					'base-100': '#FFFFFF', // White
					'base-200': '#F3F4F6', // Light gray
					'base-300': '#E5E7EB', // Medium gray
					'base-content': '#1F2937',
					info: '#3ABFF8',
					'info-content': '#000000',
					success: '#36D399',
					'success-content': '#000000',
					warning: '#FBBD23',
					'warning-content': '#000000',
					error: '#F87272',
					'error-content': '#000000'
				}
			}
		]
	}
};

// tailwind.config.js
module.exports = {
	plugins: [require('daisyui')],
	daisyui: {
		themes: [
			{
				williamstown: {
					primary: '#062174', // Club blue
					'primary-content': '#FFFFFF',
					secondary: '#DEB100', // Club gold
					'secondary-content': '#000000',
					accent: '#10B981', // Soccer green
					'accent-content': '#FFFFFF',
					neutral: '#1F2937',
					'neutral-content': '#FFFFFF',
					'base-100': '#FFFFFF', // White
					'base-200': '#F3F4F6', // Light gray
					'base-300': '#E5E7EB', // Medium gray
					'base-content': '#1F2937',
					info: '#3ABFF8',
					'info-content': '#000000',
					success: '#36D399',
					'success-content': '#000000',
					warning: '#FBBD23',
					'warning-content': '#000000',
					error: '#F87272',
					'error-content': '#000000'
				}
			}
		]
	}
};

Component Selection

组件选择

Use DaisyUI Components For

优先使用DaisyUI组件的场景

Navigation & Menus:

```
navbar
```
- Top navigation bar
```
menu
```
- Vertical/horizontal menu lists
```
dropdown
```
- Dropdown menus
```
drawer
```
- Mobile slide-out navigation
```
breadcrumbs
```
- Page navigation trail

Actions:

```
btn
```
- Buttons with variants (btn-primary, btn-secondary, btn-ghost, btn-outline)
```
btn-group
```
- Grouped button sets
```
swap
```
- Toggle/swap icons (menu hamburger)
```
link
```
- Styled links

Data Display:

```
card
```
- Content cards for news, fixtures, players
```
badge
```
- Labels and tags
```
avatar
```
- Profile pictures
```
stat
```
- Statistics display (goals, wins, etc.)
```
table
```
- Data tables for fixtures/results
```
timeline
```
- Match history timeline

Forms:

```
input
```
- Text inputs with validation states
```
textarea
```
- Multi-line text
```
select
```
- Dropdown select
```
checkbox
```
- Checkboxes
```
radio
```
- Radio buttons
```
toggle
```
- Toggle switches
```
range
```
- Range sliders
```
file-input
```
- File upload

Feedback:

```
alert
```
- Notifications and messages
```
modal
```
- Modal dialogs
```
toast
```
- Toast notifications
```
loading
```
- Loading spinners
```
skeleton
```
- Loading skeletons
```
progress
```
- Progress bars

Layout:

```
divider
```
- Section dividers
```
stack
```
- Vertical stacking
```
join
```
- Join elements together
```
indicator
```
- Notification indicators

导航与菜单：

```
navbar
```
- 顶部导航栏
```
menu
```
- 垂直/水平菜单列表
```
dropdown
```
- 下拉菜单
```
drawer
```
- 移动端侧边滑出导航
```
breadcrumbs
```
- 页面导航路径

交互操作：

```
btn
```
- 带变体的按钮（btn-primary、btn-secondary、btn-ghost、btn-outline）
```
btn-group
```
- 按钮组
```
swap
```
- 切换/交换图标（汉堡菜单）
```
link
```
- 样式化链接

数据展示：

```
card
```
- 用于新闻、赛程、球员信息的内容卡片
```
badge
```
- 标签与标记
```
avatar
```
- 头像
```
stat
```
- 统计数据展示（进球数、胜场数等）
```
table
```
- 用于赛程/结果的数据表格
```
timeline
```
- 比赛历史时间线

表单：

```
input
```
- 带验证状态的文本输入框
```
textarea
```
- 多行文本框
```
select
```
- 下拉选择框
```
checkbox
```
- 复选框
```
radio
```
- 单选按钮
```
toggle
```
- 切换开关
```
range
```
- 范围滑块
```
file-input
```
- 文件上传

反馈组件：

```
alert
```
- 通知与消息
```
modal
```
- 模态对话框
```
toast
```
- 提示通知
```
loading
```
- 加载动画
```
skeleton
```
- 骨架屏
```
progress
```
- 进度条

布局：

```
divider
```
- 区域分隔线
```
stack
```
- 垂直堆叠布局
```
join
```
- 元素拼接
```
indicator
```
- 通知标记

Use Custom Tailwind For

优先使用自定义Tailwind样式的场景

Hero sections with glassmorphism effects
Complex asymmetric layouts
Custom animations and transitions
Grid-breaking designs from frontend-design skill
Unique spacing patterns
Advanced visual effects (backdrop-blur, gradients)

带有玻璃态效果的Hero区域
复杂非对称布局
自定义动画与过渡效果
打破网格的前端设计样式
独特的间距模式
高级视觉效果（背景模糊、渐变）

Accessibility Patterns

可访问性规范

WCAG AA Compliance

WCAG AA合规性

Color Contrast:
- DaisyUI automatically ensures contrast for text/background combinations
- Verify custom colors meet 4.5:1 ratio for normal text
- Verify custom colors meet 3:1 ratio for large text (18px+)
Touch Targets:
- Use
```
btn-lg
```
  for primary CTAs (ensures 44x44px minimum)
- Default
```
btn
```
  is 48px height (meets requirements)
- Use
```
btn-sm
```
  sparingly, only for secondary actions

Form Accessibility:

jsx

<label className="form-control w-full">
	<div className="label">
		<span className="label-text">Email address</span>
	</div>
	<input
		type="email"
		placeholder="you@example.com"
		className="input input-bordered w-full"
		aria-required="true"
	/>
	<div className="label">
		<span className="label-text-alt">We'll never share your email</span>
	</div>
</label>

Focus States:
- DaisyUI includes visible focus indicators by default
- Test all interactive elements with keyboard navigation
- Use
```
focus:
```
  variants for custom styling
Semantic HTML:
- DaisyUI components use proper semantic HTML
- Add ARIA labels where needed:
```
aria-label
```
  ,
```
aria-describedby
```
- Use
```
role
```
  attribute for custom components

颜色对比度：
- DaisyUI自动确保文本与背景组合的对比度
- 验证自定义颜色的普通文本对比度达到4.5:1
- 验证自定义颜色的大文本（18px+）对比度达到3:1
触摸目标：
- 主要CTA按钮使用
```
btn-lg
```
  类（确保最小44x44px尺寸）
- 默认
```
btn
```
  高度为48px（符合要求）
- 谨慎使用
```
btn-sm
```
  ，仅用于次要操作

表单可访问性：

jsx

<label className="form-control w-full">
	<div className="label">
		<span className="label-text">邮箱地址</span>
	</div>
	<input
		type="email"
		placeholder="you@example.com"
		className="input input-bordered w-full"
		aria-required="true"
	/>
	<div className="label">
		<span className="label-text-alt">我们绝不会分享您的邮箱</span>
	</div>
</label>

焦点状态：
- DaisyUI默认包含可见的焦点指示器
- 使用键盘导航测试所有交互元素
- 自定义样式时使用
```
focus:
```
  变体
语义化HTML：
- DaisyUI组件使用标准语义化HTML
- 必要时添加ARIA标签：
```
aria-label
```
  、
```
aria-describedby
```
- 自定义组件使用
```
role
```
  属性

Common Patterns for Sports Clubs

体育俱乐部常用组件示例

Match/Fixture Card

比赛/赛程卡片

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-center justify-between">
			<h3 className="card-title text-lg">Round 5</h3>
			<div className="badge badge-primary">Home</div>
		</div>
		<div className="my-4 flex items-center justify-between">
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Williamstown SC</p>
			</div>
			<div className="px-4 text-center">
				<p className="text-3xl font-bold">2 - 1</p>
			</div>
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Opposition FC</p>
			</div>
		</div>
		<div className="card-actions justify-end">
			<button className="btn btn-ghost">Match Report</button>
		</div>
	</div>
</div>

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-center justify-between">
			<h3 className="card-title text-lg">第5轮</h3>
			<div className="badge badge-primary">主场</div>
		</div>
		<div className="my-4 flex items-center justify-between">
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Williamstown SC</p>
			</div>
			<div className="px-4 text-center">
				<p className="text-3xl font-bold">2 - 1</p>
			</div>
			<div className="flex-1 text-center">
				<p className="text-xl font-bold">Opposition FC</p>
			</div>
		</div>
		<div className="card-actions justify-end">
			<button className="btn btn-ghost">比赛报告</button>
		</div>
	</div>
</div>

News Card

新闻卡片

jsx

<div className="card bg-base-100 shadow-xl">
	<figure>
		<img src="/news-image.jpg" alt="News headline" />
	</figure>
	<div className="card-body">
		<div className="flex gap-2">
			<div className="badge badge-secondary">News</div>
			<div className="badge badge-outline">Senior Men</div>
		</div>
		<h2 className="card-title">2026 Senior Men's Coaching Team</h2>
		<p>Exciting announcement about our coaching lineup for the upcoming season...</p>
		<div className="card-actions mt-4 items-center justify-between">
			<span className="text-base-content/70 text-sm">2 days ago</span>
			<button className="btn btn-primary">Read More</button>
		</div>
	</div>
</div>

jsx

<div className="card bg-base-100 shadow-xl">
	<figure>
		<img src="/news-image.jpg" alt="新闻标题" />
	</figure>
	<div className="card-body">
		<div className="flex gap-2">
			<div className="badge badge-secondary">新闻</div>
			<div className="badge badge-outline">成年男子队</div>
		</div>
		<h2 className="card-title">2026赛季成年男子队教练组公布</h2>
		<p>关于下赛季教练阵容的激动人心的公告...</p>
		<div className="card-actions mt-4 items-center justify-between">
			<span className="text-base-content/70 text-sm">2天前</span>
			<button className="btn btn-primary">阅读更多</button>
		</div>
	</div>
</div>

Navigation Header

导航头部

jsx

<div className="navbar bg-primary text-primary-content">
	<div className="navbar-start">
		<div className="dropdown">
			<button tabIndex={0} className="btn btn-ghost lg:hidden">
				<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						strokeLinecap="round"
						strokeLinejoin="round"
						strokeWidth={2}
						d="M4 6h16M4 12h8m-8 6h16"
					/>
				</svg>
			</button>
			<ul
				tabIndex={0}
				className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
			>
				<li>
					<a>HOME</a>
				</li>
				<li>
					<a>ABOUT</a>
				</li>
				<li>
					<a>FIXTURES</a>
				</li>
			</ul>
		</div>
		<a className="btn btn-ghost text-xl">WILLIAMSTOWN SC</a>
	</div>
	<div className="navbar-center hidden lg:flex">
		<ul className="menu menu-horizontal px-1">
			<li>
				<a>HOME</a>
			</li>
			<li>
				<a>ABOUT</a>
			</li>
			<li>
				<a>MEMBER INFO</a>
			</li>
			<li>
				<a>FIXTURES</a>
			</li>
			<li>
				<a>CALENDAR</a>
			</li>
			<li>
				<a>CONTACT</a>
			</li>
			<li>
				<a>SHOP</a>
			</li>
		</ul>
	</div>
	<div className="navbar-end">
		<button className="btn btn-ghost btn-circle">
			<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth={2}
					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
				/>
			</svg>
		</button>
	</div>
</div>

jsx

<div className="navbar bg-primary text-primary-content">
	<div className="navbar-start">
		<div className="dropdown">
			<button tabIndex={0} className="btn btn-ghost lg:hidden">
				<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
					<path
						strokeLinecap="round"
						strokeLinejoin="round"
						strokeWidth={2}
						d="M4 6h16M4 12h8m-8 6h16"
					/>
				</svg>
			</button>
			<ul
				tabIndex={0}
				className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
			>
				<li>
					<a>首页</a>
				</li>
				<li>
					<a>关于我们</a>
				</li>
				<li>
					<a>赛程</a>
				</li>
			</ul>
		</div>
		<a className="btn btn-ghost text-xl">WILLIAMSTOWN SC</a>
	</div>
	<div className="navbar-center hidden lg:flex">
		<ul className="menu menu-horizontal px-1">
			<li>
				<a>首页</a>
			</li>
			<li>
				<a>关于我们</a>
			</li>
			<li>
				<a>会员信息</a>
			</li>
			<li>
				<a>赛程</a>
			</li>
			<li>
				<a>日历</a>
			</li>
			<li>
				<a>联系我们</a>
			</li>
			<li>
				<a>商店</a>
			</li>
		</ul>
	</div>
	<div className="navbar-end">
		<button className="btn btn-ghost btn-circle">
			<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
				<path
					strokeLinecap="round"
					strokeLinejoin="round"
					strokeWidth={2}
					d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
				/>
			</svg>
		</button>
	</div>
</div>

Player Card

球员卡片

jsx

<div className="card card-compact bg-base-100 shadow-xl">
	<figure>
		<img src="/player-photo.jpg" alt="Player name" className="h-64 w-full object-cover" />
	</figure>
	<div className="card-body">
		<div className="flex items-start justify-between">
			<div>
				<h3 className="card-title">John Smith</h3>
				<p className="text-base-content/70 text-sm">Midfielder</p>
			</div>
			<div className="badge badge-lg badge-primary">15</div>
		</div>
		<div className="stats stats-vertical mt-2 shadow">
			<div className="stat p-2">
				<div className="stat-title text-xs">Appearances</div>
				<div className="stat-value text-lg">24</div>
			</div>
			<div className="stat p-2">
				<div className="stat-title text-xs">Goals</div>
				<div className="stat-value text-lg">8</div>
			</div>
		</div>
	</div>
</div>

jsx

<div className="card card-compact bg-base-100 shadow-xl">
	<figure>
		<img src="/player-photo.jpg" alt="球员姓名" className="h-64 w-full object-cover" />
	</figure>
	<div className="card-body">
		<div className="flex items-start justify-between">
			<div>
				<h3 className="card-title">John Smith</h3>
				<p className="text-base-content/70 text-sm">中场</p>
			</div>
			<div className="badge badge-lg badge-primary">15</div>
		</div>
		<div className="stats stats-vertical mt-2 shadow">
			<div className="stat p-2">
				<div className="stat-title text-xs">出场次数</div>
				<div className="stat-value text-lg">24</div>
			</div>
			<div className="stat p-2">
				<div className="stat-title text-xs">进球数</div>
				<div className="stat-value text-lg">8</div>
			</div>
		</div>
	</div>
</div>

Event Card

活动卡片

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-start gap-4">
			<div className="text-center">
				<div className="text-primary text-4xl font-bold">15</div>
				<div className="text-base-content/70 text-sm">NOV</div>
			</div>
			<div className="flex-1">
				<h3 className="card-title">Season Launch Event</h3>
				<p className="text-base-content/70 mb-2 text-sm">6:00 PM - 9:00 PM</p>
				<p>Join us for the official 2026 season launch with the new coaching team...</p>
				<div className="card-actions mt-4 justify-end">
					<button className="btn btn-primary">RSVP</button>
				</div>
			</div>
		</div>
	</div>
</div>

jsx

<div className="card bg-base-100 shadow-xl">
	<div className="card-body">
		<div className="flex items-start gap-4">
			<div className="text-center">
				<div className="text-primary text-4xl font-bold">15</div>
				<div className="text-base-content/70 text-sm">11月</div>
			</div>
			<div className="flex-1">
				<h3 className="card-title">赛季启动仪式</h3>
				<p className="text-base-content/70 mb-2 text-sm">下午6:00 - 9:00</p>
				<p>欢迎加入我们2026赛季的官方启动仪式，与新教练团队见面...</p>
				<div className="card-actions mt-4 justify-end">
					<button className="btn btn-primary">预约</button>
				</div>
			</div>
		</div>
	</div>
</div>

Responsive Utilities

响应式工具

Breakpoint Classes

断点类

Use DaisyUI's responsive modifiers with Tailwind breakpoints:

jsx

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

// Card layout
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards adapt to screen size */}
</div>

// Navigation drawer (mobile)
<div className="drawer lg:drawer-open">
  <input id="drawer" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    {/* Page content */}
  </div>
  <div className="drawer-side">
    {/* Sidebar menu */}
  </div>
</div>

结合Tailwind断点使用DaisyUI的响应式修饰符：

jsx

// 按钮尺寸
<button className="btn btn-sm md:btn-md lg:btn-lg">
  响应式按钮
</button>

// 卡片布局
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* 卡片随屏幕尺寸自适应 */}
</div>

// 移动端导航抽屉
<div className="drawer lg:drawer-open">
  <input id="drawer" type="checkbox" className="drawer-toggle" />
  <div className="drawer-content">
    {/* 页面内容 */}
  </div>
  <div className="drawer-side">
    {/* 侧边栏菜单 */}
  </div>
</div>

Mobile-First Patterns

移动端优先模式

jsx

// Hide on mobile, show on desktop
<div className="hidden lg:block">Desktop Menu</div>

// Show on mobile, hide on desktop
<div className="lg:hidden">Mobile Menu</div>

// Collapse for accordion on mobile
<div className="collapse lg:collapse-open">
  <input type="checkbox" />
  <div className="collapse-title">Click to expand</div>
  <div className="collapse-content">Content</div>
</div>

jsx

// 移动端隐藏，桌面端显示
<div className="hidden lg:block">桌面端菜单</div>

// 移动端显示，桌面端隐藏
<div className="lg:hidden">移动端菜单</div>

// 移动端折叠为手风琴
<div className="collapse lg:collapse-open">
  <input type="checkbox" />
  <div className="collapse-title">点击展开</div>
  <div className="collapse-content">内容</div>
</div>

Form Validation States

表单验证状态

jsx

// Success state
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="valid@email.com"
/>

// Error state
<input
  type="text"
  className="input input-bordered input-error w-full"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" className="text-error text-sm">
  Please enter a valid email address
</span>

// Warning state
<input
  type="text"
  className="input input-bordered input-warning w-full"
/>

// Disabled state
<input
  type="text"
  className="input input-bordered w-full"
  disabled
/>

jsx

// 成功状态
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="valid@email.com"
/>

// 错误状态
<input
  type="text"
  className="input input-bordered input-error w-full"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" className="text-error text-sm">
  请输入有效的邮箱地址
</span>

// 警告状态
<input
  type="text"
  className="input input-bordered input-warning w-full"
/>

// 禁用状态
<input
  type="text"
  className="input input-bordered w-full"
  disabled
/>

Loading States

加载状态

jsx

// Button loading
<button className="btn btn-primary">
  <span className="loading loading-spinner"></span>
  Loading...
</button>

// Skeleton loader
<div className="flex flex-col gap-4">
  <div className="skeleton h-32 w-full"></div>
  <div className="skeleton h-4 w-28"></div>
  <div className="skeleton h-4 w-full"></div>
  <div className="skeleton h-4 w-full"></div>
</div>

// Card skeleton
<div className="card bg-base-100 shadow-xl">
  <div className="skeleton h-48 w-full"></div>
  <div className="card-body">
    <div className="skeleton h-4 w-3/4"></div>
    <div className="skeleton h-4 w-1/2"></div>
  </div>
</div>

jsx

// 按钮加载中
<button className="btn btn-primary">
  <span className="loading loading-spinner"></span>
  加载中...
</button>

// 骨架屏加载
<div className="flex flex-col gap-4">
  <div className="skeleton h-32 w-full"></div>
  <div className="skeleton h-4 w-28"></div>
  <div className="skeleton h-4 w-full"></div>
  <div className="skeleton h-4 w-full"></div>
</div>

// 卡片骨架屏
<div className="card bg-base-100 shadow-xl">
  <div className="skeleton h-48 w-full"></div>
  <div className="card-body">
    <div className="skeleton h-4 w-3/4"></div>
    <div className="skeleton h-4 w-1/2"></div>
  </div>
</div>

Modal Patterns

模态框模式

jsx

// Basic modal
<dialog id="my_modal" className="modal">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Match Report</h3>
    <p className="py-4">Detailed match information goes here...</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn">Close</button>
      </form>
    </div>
  </div>
</dialog>

// Modal with backdrop
<dialog id="my_modal_2" className="modal modal-bottom sm:modal-middle">
  <div className="modal-box">
    <h3 className="font-bold text-lg">Confirm Action</h3>
    <p className="py-4">Are you sure you want to proceed?</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn btn-ghost">Cancel</button>
        <button className="btn btn-primary">Confirm</button>
      </form>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

jsx

// 基础模态框
<dialog id="my_modal" className="modal">
  <div className="modal-box">
    <h3 className="font-bold text-lg">比赛报告</h3>
    <p className="py-4">详细的比赛信息将展示在这里...</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn">关闭</button>
      </form>
    </div>
  </div>
</dialog>

// 带背景遮罩的模态框
<dialog id="my_modal_2" className="modal modal-bottom sm:modal-middle">
  <div className="modal-box">
    <h3 className="font-bold text-lg">确认操作</h3>
    <p className="py-4">您确定要继续吗？</p>
    <div className="modal-action">
      <form method="dialog">
        <button className="btn btn-ghost">取消</button>
        <button className="btn btn-primary">确认</button>
      </form>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop">
    <button>关闭</button>
  </form>
</dialog>

Performance Considerations

性能考量

Bundle Size

包体积

DaisyUI adds approximately 25KB gzipped to your bundle
Components are CSS-only (no JavaScript overhead)
Use Tailwind's JIT mode for optimal bundle size
Purge unused styles in production

DaisyUI会为您的包增加约25KB的gzip压缩后体积
组件仅包含CSS（无JavaScript开销）
使用Tailwind的JIT模式优化包体积
生产环境中清除未使用的样式

Optimization Tips

优化技巧

// tailwind.config.js - Limit DaisyUI themes for smaller bundle
daisyui: {
  themes: ['williamstown'], // Only include what you need
  darkTheme: false,          // Disable if not using dark mode
  base: true,
  styled: true,
  utils: true,
}

// tailwind.config.js - 限制DaisyUI主题以减小包体积
daisyui: {
  themes: ['williamstown'], // 仅包含所需主题
  darkTheme: false,          // 不使用暗色模式则禁用
  base: true,
  styled: true,
  utils: true,
}

Tree Shaking

树摇优化

DaisyUI components are automatically tree-shaken when not used. Only include components you actually reference in your HTML/JSX.

未使用的DaisyUI组件会被自动树摇移除，仅保留您在HTML/JSX中实际引用的组件。

Combining DaisyUI with Custom Styles

DaisyUI与自定义样式结合

When to Mix

混合使用场景

jsx

// DaisyUI component with custom Tailwind
<div className="card bg-base-100 shadow-xl backdrop-blur-xl bg-opacity-80">
  <div className="card-body">
    {/* Glassmorphism effect added to DaisyUI card */}
  </div>
</div>

// DaisyUI with custom animations
<button className="btn btn-primary hover:scale-105 transition-transform duration-200">
  Hover Me
</button>

jsx

// 带有自定义Tailwind样式的DaisyUI卡片
<div className="card bg-base-100 shadow-xl backdrop-blur-xl bg-opacity-80">
  <div className="card-body">
    {/* 为DaisyUI卡片添加玻璃态效果 */}
  </div>
</div>

// 带有自定义动画的DaisyUI按钮
<button className="btn btn-primary hover:scale-105 transition-transform duration-200">
  悬停试试
</button>

Extending DaisyUI Components

扩展DaisyUI组件

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			// Add custom animations
			animation: {
				'fade-in': 'fadeIn 0.3s ease-in'
			},
			keyframes: {
				fadeIn: {
					'0%': { opacity: '0', transform: 'translateY(10px)' },
					'100%': { opacity: '1', transform: 'translateY(0)' }
				}
			}
		}
	}
};

// tailwind.config.js
module.exports = {
	theme: {
		extend: {
			// 添加自定义动画
			animation: {
				'fade-in': 'fadeIn 0.3s ease-in'
			},
			keyframes: {
				fadeIn: {
					'0%': { opacity: '0', transform: 'translateY(10px)' },
					'100%': { opacity: '1', transform: 'translateY(0)' }
				}
			}
		}
	}
};

Component Composition

组件组合

Building Complex Components

构建复杂组件

jsx

// Fixture list with stats
const FixtureList = () => (
	<div className="overflow-x-auto">
		<table className="table-zebra table">
			<thead>
				<tr>
					<th>Date</th>
					<th>Home</th>
					<th>Score</th>
					<th>Away</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Nov 15</td>
					<td className="font-bold">Williamstown SC</td>
					<td className="text-center">2 - 1</td>
					<td>Opposition FC</td>
					<td>
						<div className="badge badge-success">Win</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
);

jsx

// 带统计信息的赛程列表
const FixtureList = () => (
	<div className="overflow-x-auto">
		<table className="table-zebra table">
			<thead>
				<tr>
					<th>日期</th>
					<th>主队</th>
					<th>比分</th>
					<th>客队</th>
					<th>状态</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>11月15日</td>
					<td className="font-bold">Williamstown SC</td>
					<td className="text-center">2 - 1</td>
					<td>Opposition FC</td>
					<td>
						<div className="badge badge-success">获胜</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
);

Best Practices

最佳实践

Always use semantic HTML - DaisyUI builds on proper semantic elements
Test keyboard navigation - Ensure all interactive elements are keyboard accessible
Verify color contrast - Use tools to check WCAG compliance
Use consistent spacing - Stick to Tailwind's spacing scale (p-4, gap-4, etc.)
Leverage data-theme - Apply theme to container elements:
```
<div data-theme="williamstown">
```
Mobile-first design - Start with mobile styles, add responsive modifiers
Avoid !important - Use Tailwind's specificity instead
Document custom variants - Keep track of custom component combinations

始终使用语义化HTML - DaisyUI基于标准语义化元素构建
测试键盘导航 - 确保所有交互元素可通过键盘访问
验证颜色对比度 - 使用工具检查WCAG合规性
保持间距一致 - 遵循Tailwind的间距规范（如p-4、gap-4等）
利用data-theme属性 - 为容器元素应用主题：
```
<div data-theme="williamstown">
```
移动端优先设计 - 从移动端样式开始，添加响应式修饰符
避免使用!important - 使用Tailwind的优先级机制替代
记录自定义变体 - 跟踪自定义组件组合

Common Pitfalls

常见误区

❌ Don't:

Mix inline styles with DaisyUI classes
Override DaisyUI CSS variables without understanding the system
Create custom components when DaisyUI has a solution
Ignore accessibility features built into components

✅ Do:

Use DaisyUI's theme system for customization
Extend with Tailwind utilities when needed
Test components across breakpoints
Maintain consistent spacing and sizing
Follow the component composition patterns above

❌ 请勿：

将内联样式与DaisyUI类混合使用
不理解系统原理就覆盖DaisyUI CSS变量
已有DaisyUI解决方案时仍自定义组件
忽略组件内置的可访问性特性

✅ 建议：

使用DaisyUI的主题系统进行定制
需要时结合Tailwind工具类扩展
跨断点测试组件
保持间距和尺寸一致
遵循上述组件组合模式

Quick Reference

快速参考

Component Class Patterns

组件类命名模式

Button:     btn btn-{variant} btn-{size}
Card:       card card-{variant}
Input:      input input-{variant} input-{size}
Badge:      badge badge-{variant} badge-{size}
Alert:      alert alert-{variant}
Modal:      modal modal-{position}

按钮:     btn btn-{变体} btn-{尺寸}
卡片:       card card-{变体}
输入框:      input input-{变体} input-{尺寸}
标签:      badge badge-{变体} badge-{尺寸}
警告框:      alert alert-{变体}
模态框:      modal modal-{位置}

Color Variants

颜色变体

primary, secondary, accent, neutral, info, success, warning, error, ghost

primary, secondary, accent, neutral, info, success, warning, error, ghost

Size Modifiers

尺寸修饰符

xs, sm, md (default), lg, xl

xs, sm, md（默认）, lg, xl

State Modifiers

状态修饰符

disabled, loading, active, focus

disabled, loading, active, focus