daisyUI

daisyUI 是一个基于 Tailwind CSS 的组件库插件，提供语义化的类名来替代重复的 Tailwind 工具类。通过使用 btn、card、toggle 等组件类名，开发者可以大幅减少 HTML 中的类名数量（据称减少约 88%），同时保持代码整洁且易于维护。

核心特性

• 语义化组件：提供 68+ 个开箱即用的 UI 组件，如按钮、卡片、表单、导航等，所有组件样式基于 Tailwind 工具类实现。
• 主题系统：内置 30+ 个主题（如 light、dark、cupcake、synthwave 等），支持主题生成器自定义配色方案。主题使用 CSS 变量实现，切换主题无需额外 JavaScript。
• 纯 CSS，无 JS 依赖：daizyUI 本身不包含 JavaScript，适用于任何前端框架（React、Vue、Svelte、Angular 等）或原生 HTML 项目。
• 高度可定制：所有组件均可通过 Tailwind 工具类覆盖样式，同时支持语义化的颜色命名（如 primary、secondary、accent 等），便于统一调整品牌色。

适用场景

• 快速搭建原型或中型项目，减少样式代码编写量。
• 需要内置深色模式、多主题切换的 Tailwind 项目。
• 偏好纯 CSS 解决方案，避免引入额外 UI 框架（如 Bootstrap 或 React UI 库）的开发者。

使用方式

1. 安装：通过 npm 或 yarn 安装 daisyUI 作为 Tailwind CSS 的插件。
2. 配置：在 Tailwind 配置文件中将 daisyUI 列为插件，并可选主题与组件。
3. 应用类名：直接在 HTML 中使用 btn btn-primary 等类名，可混合 Tailwind 工具类进行微调。

注意事项

• daisyUI 并未提供完整的 JavaScript 行为（如下拉菜单的交互），需要自行用框架或原生 JS 实现。
• 主题系统依赖于 CSS 变量，自定义主题时需注意变量名规范。
• 部分高级功能（如 MCP Server）可能仍在开发中，建议参考官方文档获取最新信息。