mcpField
D
daisy-ui

daisy-ui

github.com/dejanvasic85设计与 UI154 次安装3 天前更新
代码仓库

关于 daisy-ui

daisy-ui 是一项为编码 Agent 提供 DaisyUI 组件使用指导的技能，面向构建 Williamstown SC 网站的开发工作。它说明主题配置、组件选择、响应式布局与无障碍实践，并结合 Tailwind 自定义样式。

主要功能

  1. 01配置 Williamstown SC 品牌主题
  2. 02按用途选择 DaisyUI 组件
  3. 03Tailwind 自定义样式指导
  4. 04提供无障碍与响应式模式
  5. 05说明组件组合和性能注意事项

适用场景

  1. 01构建球队新闻和赛程页面
  2. 02实现导航、表单及反馈界面
  3. 03为移动端适配页面布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dejanvasic85/williamstownsc --skill daisy-ui

安装后在 Claude Code 中输入/daisy-ui确认已加载。

附带文件llms.txt

详细介绍

daisy-ui

说明

请遵循 ./llms.txt 中的文档，按照主 CLAUDE.md 文件中说明的项目技术栈和编码规范，编写使用 DaisyUI 组件和主题的代码。

主题自定义

在 tailwind.config.js 中配置 DaisyUI 主题，以体现 Williamstown SC 的品牌形象：

主色
  • primary：#062174（俱乐部蓝——传统、可信赖）
  • secondary：#DEB100（俱乐部黄/金色——充满活力、醒目）
  • accent：#10B981（绿色——营造足球场氛围）
  • neutral：#1F2937（用于文本的深灰色）
  • base-100：#FFFFFF（白色背景）
  • base-200：#F3F4F6（浅灰色背景）
  • base-300：#E5E7EB（中灰色边框）
排版指南
  • 使用 font-sans，搭配系统字体或 Inter
  • 为保证无障碍性，确保基础字号至少为 16px
  • 使用适当的行高（正文为 1.5+）
  • 使用不同的字重：400（常规）、500（中等）、600（半粗体）、700（粗体）
主题配置示例
// 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'
				}
			}
		]
	}
};

组件选择

使用 DaisyUI 组件的场景

导航和菜单：

  • 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 - Toast 通知
  • loading - 加载旋转指示器
  • skeleton - 加载骨架屏
  • progress - 进度条

布局：

  • divider - 分节分隔线
  • stack - 垂直堆叠
  • join - 将元素组合在一起
  • indicator - 通知指示器
使用自定义 Tailwind 的场景
  • 带有玻璃拟态效果的 Hero 区块
  • 复杂的非对称布局
  • 自定义动画和过渡效果
  • 来自 frontend-design skill 的突破网格设计
  • 独特的间距模式
  • 高级视觉效果（backdrop-blur、渐变）

无障碍设计模式

符合 WCAG AA 标准

  1. 颜色对比度：

    • DaisyUI 会自动确保文本与背景组合的对比度
    • 确认自定义颜色的普通文本对比度达到 4.5:1
    • 确认自定义颜色的大号文本（18px+）对比度达到 3:1

  2. 触控目标：

    • 主要 CTA 使用 btn-lg（确保最小尺寸为 44x44px）
    • 默认 btn 高度为 48px（符合要求）
    • 尽量少用 btn-sm，仅用于次要操作

  3. 表单无障碍性：

    <label className="form-control w-full">
	<div className="label">
		<span className="label-text">Email address</span>
	</div>
	<input
		type="email"
		placeholder="[email protected]"
		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>

  4. 焦点状态：

    • DaisyUI 默认包含清晰可见的焦点指示器
    • 使用键盘导航测试所有交互元素
    • 使用 focus: 变体进行自定义样式设置

  5. 语义化 HTML：

    • DaisyUI 组件使用恰当的语义化 HTML
    • 在需要时添加 ARIA 标签：aria-label、aria-describedby
    • 为自定义组件使用 role 属性

体育俱乐部常用模式

比赛/赛程卡片
<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>
新闻卡片
<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>
导航页眉
<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>
球员卡片
<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>
活动卡片
<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>

响应式工具类

断点类

将 DaisyUI 的响应式修饰符与 Tailwind 断点搭配使用：

// 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>
移动端优先模式
// 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>

表单验证状态

// Success state
<input
  type="text"
  className="input input-bordered input-success w-full"
  defaultValue="[email protected]"
/>

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

加载状态

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

模态框模式

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

性能注意事项

打包体积
  • DaisyUI 会为你的打包文件增加约 25KB 的 gzip 压缩体积
  • 组件仅使用 CSS（无 JavaScript 开销）
  • 使用 Tailwind 的 JIT 模式以获得最佳打包体积
  • 在生产环境中清除未使用的样式
优化技巧
// 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,
}
Tree Shaking

未使用的 DaisyUI 组件会自动进行 tree-shaking。只包含 HTML/JSX 中实际引用的组件。

将 DaisyUI 与自定义样式结合使用

何时混用
// 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>
扩展 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)' }
				}
			}
		}
	}
};

组件组合

构建复杂组件
// 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>
);

最佳实践

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

常见陷阱

❌ 不要：

  • 将内联样式与 DaisyUI 类混用
  • 不了解系统就覆盖 DaisyUI CSS 变量
  • DaisyUI 已有解决方案时仍创建自定义组件
  • 忽略组件内置的无障碍功能

✅ 应该：

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

快速参考

组件类模式
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}
颜色变体
primary, secondary, accent, neutral, info, success, warning, error, ghost
尺寸修饰符
xs, sm, md (default), lg, xl
状态修饰符
disabled, loading, active, focus

评论

支持 Markdown