daisyui
最流行的免费开源 Tailwind CSS 组件库
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：daisyui。 它的用途是：最流行的免费开源 Tailwind CSS 组件库 完整的 Skill 内容见：https://321skill.com/skills/daisyui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我在这个HTML页面上添加一个带警告信息的模态框，使用daisyUI的样式。” 它会生成包含 daisyUI `modal` 和 `alert` 类名的HTML代码块，你可以直接复制使用。或者问：“用daisyUI设计一个用户个人资料卡片。” AI会提供一个包含头像、姓名、简介和操作按钮的完整卡片组件代码。
介绍
daisyUI 是一个基于 Tailwind CSS 的免费开源组件库，它解决了开发者在使用 Tailwind CSS 时需要从零开始构建和设计通用 UI 组件（如按钮、卡片、导航栏、模态框等）的重复劳动问题。它提供了一套设计精美、语义化且易于定制的预制组件，开发者只需通过添加类名即可快速搭建界面，极大地提升了开发效率。
使用方式非常简单，通过 npm 或 yarn 安装 daisyUI 作为 Tailwind CSS 的插件，并在 Tailwind 配置文件中引入即可。之后，开发者就可以在 HTML 中使用 daisyUI 提供的类名（如 btn、card、modal）来直接生成样式完整的组件，同时仍然可以结合 Tailwind 的实用类进行深度定制。
它非常适合所有使用 Tailwind CSS 进行前端开发的个人开发者、团队和项目，无论是快速原型开发、内部工具构建，还是生产级应用的前端界面实现，都能从中受益。对于希望保持 Tailwind 灵活性但又不想在基础组件上花费过多时间的开发者来说，daisyUI 是理想选择。
与同类 Tailwind 组件库（如 Headless UI、Flowbite）相比，daisyUI 的核心优势在于其极致的易用性和“开箱即用”的特性。它提供了更完整、设计更统一且默认样式更美观的组件，同时通过主题系统（Themes）支持一键切换多种视觉风格，社区生态和流行度也更高。
核心特点
daisyUI 提供了大量设计精美、语义化且完全可定制的预制组件，与 Tailwind CSS 深度集成，通过简单的类名即可使用，并内置强大的主题系统，支持一键切换多种视觉风格，其流行度和社区活跃度在同类工具中最高。
注意事项
对于追求极致轻量、希望完全自主控制组件 DOM 结构和交互逻辑（即“无头UI/Headless UI”）的项目可能不够灵活。
常见问题
daisyUI 和 Tailwind CSS 是什么关系？
daisyUI 是 Tailwind CSS 的一个插件，它在 Tailwind 的实用类基础上，提供了一套预制的高层组件类，让你能更快地搭建界面。
daisyUI 是免费的吗？
是的，daisyUI 是完全免费和开源的，遵循 MIT 许可证，可用于个人和商业项目。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/daisyui/raw/index.md 读取 daisyui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/daisyui/raw/index.md（查看排版版本）