用途
daisyUI 是一个 Tailwind CSS 组件库，为 UI 组件提供语义化类名。开发者无需编写 flex items-center justify-center gap-2 rounded-lg bg-indigo-500 px-4 py-2 text-white 这类工具类链，而是直接使用 btn btn-primary。其核心理念包含四点：语义化类名（使用 btn、card、modal 等有意义的名称）、主题驱动（35 个内置主题，可通过 CSS 变量无限自定义）、纯 CSS（无 JS 运行时、无框架锁定、适配任意技术栈）、Tailwind 原生（扩展 Tailwind，所有工具类仍可用于微调）。
主要能力
- 组件目录覆盖多个类别：操作（Button、Dropdown、FAB/Speed Dial、Modal、Swap、Theme Controller）、数据展示（Accordion、Avatar、Badge、Card、Carousel、Chat Bubble、Collapse、Countdown、Diff、Hover 3D Card、Hover Gallery、Kbd、List、Stat、Status、Table、Text Rotate、Timeline）、导航（Breadcrumbs、Dock、Link、Menu、Navbar、Pagination、Steps、Tabs）、反馈（Alert、Loading、Progress、Radial Progress、Skeleton、Toast、Tooltip）、数据输入（Calendar、Checkbox、Fieldset、File Input、Filter、Label、Radio、Range、Rating、Select、Text Input、Textarea、Toggle、Validator）、布局（Divider、Drawer、Footer、Hero、Indicator、Join、Mask、Stack）、模型（Browser、Code、Phone、Window）。
- 类名模式统一：{component} 为基础类（必需），{component}-{variant} 为样式变体，{component}-{color} 为语义颜色，{component}-{size} 为尺寸修饰（xs、sm、md、lg、xl），{component}-{state} 为状态修饰（active、disabled、open）。多数组件支持 outline、ghost、soft、dash 等样式变体。
- 颜色系统采用语义化命名而非固定十六进制值，颜色随主题自动变化。包括 primary、secondary、accent、neutral、base-100、base-200、base-300、info、success、warning、error 及其对应的 -content 配对色。这些颜色可与所有 Tailwind 工具类配合使用，如 bg-primary、text-primary-content、border-accent、ring-error、from-primary/50。
- 主题系统提供 35 个内置主题：light、dark、cupcake、bumblebee、emerald、corporate、synthwave、retro、cyberpunk、valentine、halloween、garden、forest、aqua、lofi、pastel、fantasy、wireframe、black、luxury、dracula、cmyk、autumn、business、acid、lemonade、night、coffee、winter、dim、nord、sunset、caramellatte、abyss、silk。可通过 data-theme 属性在页面级或元素级应用主题，并支持嵌套主题。
- 主题 CSS 变量可控制语义颜色、圆角（--radius-box、--radius-field、--radius-selector）、尺寸（--size-selector、--size-field）、边框宽度（--border）、深度（--depth）与噪点纹理（--noise）。对应提供 rounded-box、rounded-field、rounded-selector 圆角工具类。
使用方式
安装：npm i -D daisyui@latest。 在 Tailwind CSS v4+ 中配置： @import "tailwindcss"; @plugin "daisyui"; 带主题选择： @plugin "daisyui" { themes: light --default, dark --prefersdark, nord, dracula; } 配置选项包括 themes（默认 light --default, dark --prefersdark，可设为 all、false 或逗号列表）、root（默认 ":root"，用于 Web Components 或 Shadow DOM）、include（白名单特定组件）、exclude（黑名单特定组件）、prefix（为所有 daisyUI 类添加前缀，如 d-btn）、logs（默认 true，构建时控制台输出）。 自定义主题通过 @plugin "daisyui/theme" 定义，可设置 name、default、color-scheme 以及各颜色变量与圆角、尺寸、边框、深度、噪点变量。 关键模式示例包括：使用原生 <dialog> 元素实现 Modal（推荐，具备更好的可访问性与 ESC 支持）；使用 drawer 与 lg:drawer-open 实现响应式侧边栏；使用 card 构建卡片；使用 fieldset 构建表单。 框架集成方面，daisyUI 为纯 CSS，在 React、Vue、Svelte、Solid、HTMX 或纯 HTML 中表现一致，无需框架专用包装器。可通过 useState 与 useEffect 动态切换 data-theme，或使用 theme-controller 类让任意 checkbox/radio 自动切换主题。 自定义途径包括：添加 Tailwind 工具类、使用内置组件变体、通过自定义主题修改变量、使用 @utility 指令覆盖组件默认样式、通过 include/exclude 仅加载所需组件以减小 CSS 体积。
适用场景
- 向项目添加 daisyUI（npm i -D daisyui）。
- 选择或自定义主题。
- 使用 daisyUI 组件构建布局（drawer、navbar、hero）。
- 使用 daisyUI 类为表单、模态框、卡片、表格设置样式。
- 将 daisyUI 与 React、Vue、Svelte 或任意框架集成。
- 查询 daisyUI 类名、变体或响应式模式。
限制与注意事项
- 常见陷阱包括：使用 Tailwind 颜色类（如 bg-blue-500）而非语义颜色会破坏主题；忘记基础类（如只写 btn-primary 而漏掉 btn）会导致样式不生效；将 daisyUI 模态框与框架 portal 混用（应使用原生 <dialog> 或框架自身的模态框）；未在配置中启用主题（默认仅 light 和 dark 可用）；使用 dark: 变体而非 data-theme（主题不止明暗两种）。
- 最佳实践建议：使用语义颜色、与 Tailwind 结合（daisyUI 负责组件，Tailwind 负责布局/间距/尺寸）、尽早确定主题、使用 data-theme 进行主题切换、模态框优先使用 <dialog>、响应式抽屉使用 lg:drawer-open、需要深度定制时使用 @utility 指令、使用 join 连接相关元素。
- 从 v4 迁移到 v5 涉及类名重命名（如 card-bordered 改为 card-border、btm-nav 改为 dock）、移除的类（form-control、input-group、输入框上的 -bordered）、行为变化（footer 默认垂直、输入框默认带边框）、新组件（list、status、fieldset、filter、validator、dock、calendar）以及新修饰符（xl 尺寸、soft、dash 样式）。
- 文档与资源 URL 模式：组件文档 https://daisyui.com/components/{name}/，主题列表 https://daisyui.com/docs/themes/，颜色系统 https://daisyui.com/docs/colors/，配置 https://daisyui.com/docs/config/，工具类 https://daisyui.com/docs/utilities/，主题生成器 https://daisyui.com/theme-generator/。