daisyui

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
• 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 代码之前，请按顺序执行以下步骤：

1. 识别请求中预期的功能、行为和布局。不要仅使用确切的字词。
2. 使用本文件中的组件列表来选择最佳候选组件。
3. 如果选择不明确，请先阅读能够满足请求的候选组件的指南，然后再进行选择。
4. 将每个候选组件的描述、行为、语法和规则与请求进行比较。
5. 选择最佳组件或组件组合。遵守其所有约束。
6. 使用所选组件的确切结构和约束。

即使字词与组件名称不同，你也必须匹配其含义。名称不同的组件仍然可能是最佳匹配。始终检查预期的功能和含义。

如果用户请求了某个具名组件，并且存在与该名称对应的指南，请先阅读该指南。