daisyUI 5 是一个 CSS 组件库，用于 Tailwind CSS 4，提供常见 UI 组件的类名，帮助快速构建一致、无障碍、可感知主题的网页界面。
用途：为使用 HTML/Tailwind 构建的网页界面提供预先定义好的语义化组件类名，从而减少手写样式的工作量，并保证界面风格统一。
安装：daisyUI 5 依赖 Tailwind CSS 4，而 tailwind.config.js 在 Tailwind CSS v4 中已弃用。通过 npm 安装可使用 npm i -D daisyui@latest，然后在 CSS 文件中加入：@import "tailwindcss"; 与 @plugin "daisyui";。或者使用 CDN，通过 link 标签引入 https://cdn.jsdelivr.net/npm/daisyui@5 的样式表，并引入 https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4 的脚本。
配置：基础配置无需任何配置，直接使用默认值，即 @plugin "daisyui";。可配置为仅明亮主题：@plugin "daisyui" { themes: light --default; }。可配置暗色模式，例如 themes: light --default, dark --prefersdark; 并搭配 root、include、exclude、prefix、logs 等选项。还可列出全部内置主题，如 light、dark、cupcake、bumblebee 等，并通过 <html data-theme="cupcake"> 在 HTML 元素上设置主题。自定义主题可使用主题生成器，或手动编写 @plugin "daisyui/theme" 配置块，其中定义 name、default、prefersdark、color-scheme 以及一系列 --color-、--radius-、--size-*、--border、--depth、--noise 变量。
使用规则：将 daisyUI 类名添加到 HTML 元素上，类名由 component、part、modifier 等组成；用 Tailwind 工具类进行自定义，如 btn px-10；遇到优先级问题时最后才使用 ! 后缀，如 bg-red-500!；如果组件不存在，则用 Tailwind 工具类自行构建；用 Tailwind 前缀实现响应式布局，如 sm:card-horizontal；只使用 daisyUI 类名或 Tailwind 工具类，理想情况下无需自定义 CSS。附加指南包括：占位图使用 https://picsum.photos/{width}/{height}；非必要不添加自定义字体；非必要不为 body 添加 bg-base-100 text-base-content；设计决策遵循《Refactoring UI》一书的最佳实践。
类名类别：daisyUI 类名分为 component（必需组件类，如 btn、card）、part（组件的子部分，如 card-title、card-body）、style（特定样式，如 btn-outline、alert-soft）、behavior（改变行为，如 btn-active、btn-disabled）、color（设置颜色，如 btn-primary、alert-error）、size（设置尺寸，如 btn-sm、input-lg）、placement（设置位置，如 dropdown-top、modal-middle）、direction（设置方向，如 tabs-horizontal、carousel-vertical）、modifier（修饰组件，如 btn-wide、card-side）、variant（以 variant:utility-class 语法表示的变体前缀，如 is-drawer-open:w-64）。这些类别仅作参考，不直接在代码中使用。
颜色系统：语义化颜色名称包括 primary/primary-content（主品牌色）、secondary/secondary-content（次要品牌色）、accent/accent-content（强调色）、neutral/neutral-content（中性 UI 元素）、base-100（基础表面色，用于空白背景）、base-200（用于层级的更深色调）、base-300（用于层级的更深色调）、base-content（前景内容色）、info/info-content（信息提示）、success/success-content（成功状态）、warning/warning-content（警告状态）、error/error-content（错误状态）。颜色规则：daisyUI 颜色是主题感知的，会随主题变化；使用 daisyUI 颜色时无需 dark: 前缀；像 red-500 这样的 Tailwind 颜色在所有主题下保持不变；避免使用 text-gray-800 这类 Tailwind 文本颜色，因为在暗色主题下难以阅读；-content 颜色与其关联颜色具有良好对比度；页面大部分区域使用 base- 颜色；重要元素使用 primary 颜色。
常见组件示例：按钮使用 <button class="btn btn-primary">Click me</button> 等；输入框使用 <input type="text" placeholder="Type here" class="input input-bordered" />；卡片由 card、figure、card-body、card-title、card-actions 等类名构成；模态框使用 dialog 元素配合 modal、modal-box、modal-action 等类名；警告使用带 role="alert" 的 alert alert-error；导航栏使用 navbar、navbar-start、navbar-center、navbar-end；抽屉使用 drawer、drawer-toggle、drawer-content、drawer-side、drawer-overlay 等。
资源：references/ 目录下提供组件文档和详细示例，其中 components.md 包含每个 daisyUI 组件的完整类名、语法和使用规则，涵盖 accordion、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、menu、mockup-browser、mockup-code、mockup-phone、mockup-window、modal、navbar、pagination、progress、radial-progress、radio、range、rating、select、skeleton、stack、stat、status、steps、swap、tab、table、text-rotate、textarea、theme-controller、timeline、toast、toggle、validator。处理具体组件时，可查阅 components.md 并搜索该组件的章节。