daisyUI

daisyUI 是 Tailwind CSS 的组件插件，通过 button、card、alert、modal 等语义类名组合界面，并提供多套主题和 Theme Generator。官方安装页要求先有 Tailwind CSS，再安装 daisyui 包，并在主 CSS 中加入 @plugin "daisyui";。它主要生成 HTML/CSS，因此能用于多种前端框架。

语义类名减少重复 utility

使用 btn btn-primary 比在每个按钮重复颜色、边框、圆角和状态类更易读，也便于全局换主题。语义层并没有取消 Tailwind：布局、响应式和局部调整仍可使用 utilities。团队应规定何时使用组件类、何时允许局部覆盖，避免同一按钮出现多种写法。

安装路径以 Tailwind 插件为核心

1. 确认项目已安装 Node.js 与 Tailwind CSS。
2. 安装 daisyui@latest 开发依赖。
3. 在 app.css 导入 Tailwind 并注册 daisyUI 插件。
4. 用最小页面确认样式被构建工具扫描。
5. 再按框架接入组件结构和业务状态。

跨框架不等于交互逻辑通用

主题要映射产品语义

内置主题适合原型和风格探索，正式产品应将 primary、secondary、accent、neutral、base、info、success、warning 和 error 等角色与品牌规范对应。浅色、暗色和高对比主题分别检查正文、边框、按钮、禁用及反馈状态，不用换主题来掩盖组件层级问题。

CSS 交互有明确边界

Modal、Dropdown、Drawer 等结构可以借助 HTML 状态或 CSS 工作，但复杂应用还需要焦点陷阱、路由联动、异步关闭和错误恢复。采用前走一遍键盘、屏幕阅读器和移动端流程；若产品已有 Headless 交互层，应避免两套状态机制互相竞争。

按需输出与升级需要检查

插件方式便于按项目构建 CSS，但动态拼接类名可能无法被内容扫描发现。将可用变体写成明确映射，检查生产包体和未使用样式。升级 daisyUI 或 Tailwind 时，比较主题变量、组件标记和构建配置变化，不只看页面是否“差不多”。

商店资源与开源插件分开看

官网导航还包含 Templates、Charts、Figma Library 等商店产品，它们与基础插件可能有不同价格和许可。使用客户项目、团队设计文件或可再销售模板前，分别核对条款；仅安装开源包不代表自动获得所有商店资源。