saadeghi/daisyui

41.3k 1.6k 163

Svelte MIT

GitHub Homepage

创建于 5 年前最后更新 1 周前 +18 stars today

AI 综合评分

71 B 级

代码质量

65

文档质量

74

社区健康

68

项目活跃

77

创新性

62

项目简介

基于 Tailwind CSS 的免费开源 UI 组件库，提供丰富预设样式，简化前端开发。

项目摘要

【主题】

daisyUI 是一个基于 Tailwind CSS 的开源组件库，旨在通过提供语义化类名，让开发者无需编写大量 utility 类就能快速构建美观、一致的 UI 界面。

【核心分点总结】

1. 语义化类名：告别冗长的 flex items-center justify-between...，只需使用 btn btn-primary 这样的直观类名，代码更简洁易读。
2. 丰富的主题与定制：内置多套主题（如暗黑模式、多种色彩方案），并支持通过 CSS 变量轻松定制，实现品牌风格一体化。
3. 轻量无依赖：作为 Tailwind CSS 的插件运行，不引入额外 JavaScript 依赖，打包体积小，性能开销极低。
4. 组件齐全，开箱即用：提供按钮、卡片、模态框、表单控件等数十种高质量、可响应式的常用组件，覆盖绝大多数 UI 场景。
5. 生态兼容性强：完美支持原生 HTML、React、Vue、Svelte 等主流前端框架，无缝集成现有项目。

【行动指南】

适用场景：当你使用 Tailwind CSS 开发项目，希望快速搭建界面原型，或追求开发效率与代码可维护性的统一时，daisyUI 是理想选择。
快速上手：通过 npm 或 yarn 安装 daisyui，然后在 tailwind.config.js 文件中引入插件，即可开始使用其组件类名。
主题切换：在 <html> 标签上添加 data-theme 属性（如 data-theme="dark"），即可一键切换整个应用的视觉主题。

【金句总述】

“用 Tailwind 的心脏，跳动出组件库的灵魂，让开发回归创造的本质。”

【故事性收尾】

想象一下，曾经需要在几十个 utility 类中反复斟酌、调整样式的午后，现在变成了在编辑器中轻快地敲下 card shadow-xl，一个精美的卡片便瞬间成型。你的目光不再被 CSS 细节所困，而是更多地聚焦于产品逻辑与用户体验。daisyUI 像一位默契的搭档，将繁琐的样式工作化于无形，让你得以在代码的画布上，更专注、更流畅地勾勒出理想的交互图景。