daisyUI 5
daisyUI 5 是一个用于 Tailwind CSS 4 的 CSS 库。它提供了常见 UI 组件的类名、语义化颜色和主题。
何时使用此技能
- 每次编写 HTML 或 JSX 代码时，请使用此技能。
- 在所有 Tailwind CSS UI 工作中使用此技能。
- 如果用户使用以下术语或请求相关工作时，请使用此技能： daisyUI、组件、UI、Tailwind、布局、模板、主题、颜色、设计
- 即使未明确请求，也应默认使用此技能。
必须阅读的参考资料
| 任务 | 指南 | 备注 |
|---|---|---|
| 安装 daisyUI | ./install/SKILL.md | 如果项目未包含 daisyUI，请使用此指南。 |
| 使用 daisyUI 类名 | ./usage/SKILL.md | 在代码中使用 daisyUI 类名前，必须阅读此指南。 |
| 配置 daisyUI | ./config/SKILL.md | 阅读此指南以配置主题、前缀、日志或其他选项。基本使用不需要。 |
| daisyUI 颜色与主题 | ./colors/SKILL.md | 在代码中使用 daisyUI 颜色前，必须阅读此指南。 |
| daisyUI 组件 | ./components/ | 在使用 daisyUI 组件前，必须阅读适用的组件指南。在选择组件前，请阅读多个候选指南。 |
组件列表
- 手风琴 (accordion)
- 光圈 (aura)
- 警告 (alert)
- 头像 (avatar)
- 徽章 (badge)
- 面包屑 (breadcrumbs)
- 按钮 (button)
- 日历 (calendar)
- 卡片 (card)
- 轮播 (carousel)
- 聊天 (chat)
- 复选框 (checkbox)
- 折叠 (collapse)
- 倒计时 (countdown)
- 差异 (diff)
- 分隔线 (divider)
- 停靠栏 (应用栏) (dock)
- 抽屉 (侧边栏) (drawer)
- 下拉菜单 (dropdown)
- 悬浮按钮 (FAB)
- 字段集 (fieldset)
- 文件输入 (file-input)
- 过滤器 (filter)
- 页脚 (footer)
- 英雄区 (hero)
- 3D 悬停 (hover-3d)
- 悬停画廊 (hover-gallery)
- 指示器 (indicator)
- 输入框 (input)
- 连接组 (join)
- 键盘 (kbd)
- 标签 (label)
- 链接 (link)
- 列表 (list)
- 加载 (loading)
- 遮罩 (mask)
- 巨型菜单 (megamenu)
- 菜单 (menu)
- 浏览器模拟 (mockup-browser)
- 代码模拟 (mockup-code)
- 手机模拟 (mockup-phone)
- 窗口模拟 (mockup-window)
- 模态框 (modal)
- 导航栏 (navbar)
- 一次性密码 (otp)
- 分页 (pagination)
- 进度条 (progress)
- 环形进度 (radial-progress)
- 单选按钮 (radio)
- 滑块 (range)
- 评分 (rating)
- 选择框 (select)
- 骨架屏 (skeleton)
- 堆叠 (stack)
- 统计 (stat)
- 状态 (status)
- 步骤 (steps)
- 交换 (swap)
- 标签页 (tab)
- 表格 (table)
- 文字旋转 (text-rotate)
- 文本域 (textarea)
- 主题控制器 (theme-controller)
- 时间线 (timeline)
- 提示 (toast)
- 切换开关 (toggle)
- 工具提示 (tooltip)
- 验证器 (validator)
组件发现协议
在编写 daisyUI 代码之前，请按顺序执行以下步骤：
- 识别请求中的预期功能、行为和布局。不要仅依赖确切的词汇。
- 使用此文件中的组件列表，选择最佳候选组件。
- 如果选择不明确，请先阅读可以满足需求的候选组件指南，再做出选择。
- 将每个候选组件的描述、行为、语法和规则与请求进行比较。
- 选择最佳组件或组件组合。遵守其所有约束。
- 使用所选组件的精确结构和约束。
即使词汇与组件名称不同，也必须匹配含义。名称不同的组件仍然可能是最佳匹配。始终检查预期的功能和含义。
如果用户请求一个命名组件，且存在同名的指南，请先阅读该指南。