daisyui

库

saadeghi/daisyui

最流行的免费开源Tailwind CSS组件库。

项目简介

一个免费开源的Tailwind CSS组件库,提供丰富的可复用UI组件和可定制主题。轻量级且易于集成到任何Web项目中。

README 预览

\n\n[![][logo-url]][docs-url]\n\n**The most popular, free and open-source component library for Tailwind CSS**\n\n[![][version]](https://www.npmjs.com/package/daisyui)\n[![][commit]](https://github.com/saadeghi/daisyui)\n[![][license]](https://github.com/saadeghi/daisyui/blob/master/LICENSE)\n[![][stars]](https://github.com/saadeghi/daisyui)\n[![][installs]](https://www.npmjs.com/package/daisyui)\n[![][jsdelivr]](https://cdn.jsdelivr.net/npm/daisyui@5)\n[![][discord]](https://daisyui.com/discord/)\n[![][opencollectivebadge]](https://opencollective.com/daisyui)\n\n\n\n# daisyUI 5\n\n### 🌼 [Official website →](https://daisyui.com/)\n\n### 🧩 [See all components →](https://daisyui.com/components/)\n\n### 🚀 [How to use →](https://daisyui.com/docs/install/)\n\n### 🤝 [Contribute →](.github/CONTRIBUTING.md)\n\n---\n\n\n\nSponsors and backers\n\n[![][backers_org]][opencollective]\n[![][backers]][opencollective]\n\nContributors\n\n[![][contributors_img]][contributors]\n\n\n\n\n\n༼ つ ◕_◕ ༽つ Please share\n\n[![][tweet]](https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui)\n\n\n\n[version]: https://badgen.net/github/tag/saadeghi/daisyui?label=Version&color=1AD1A5\n[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?label=Last%20commit&color=1AD1A5\n[license]: https://badgen.net/github/license/saadeghi/daisyui?label=License&color=1AD1A5\n[stars]: https://badgen.net/github/stars/saadeghi/daisyui?label=GitHub%20stars&color=1AD1A5\n[installs]: https://badgen.net/npm/dt/daisyui?label=NPM%20installs&color=1AD1A5\n[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/daisyui?color=1AD1A5\n[discord]: https://badgen.net/discord/members/S6TZxycVHs?label=Discord&color=1AD1A5\n[opencollectivebadge]: https://badgen.net/opencollective/backers/daisyui?label=Open%20Collective&color=1AD1A5\n[tweet]: https://img.shields.io/twitter/url?label=Share&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui\n[docs-url

常见问题 (5)

故障排除
如何修复来自 daisyui_component_syntax_expert 或 daisyui_creative_director 的 MCP 错误 -32602“Structured content does not match the tool's output schema”?

将 daisyUI Blueprint MCP 服务器从 v1.8.1 升级到 v1.8.2 或更高版本,该版本修复了不符合 schema 的 advisory 工具响应问题。

1. 停止 MCP 服务器/客户端。
2. 升级软件包,例如:
npm install daisyui-blueprint@1.8.2
3. 重启 MCP 客户端。
4. 确认 _meta.serverVersion 为 1.8.2。
5. 重新运行 daisyui_component_syntax_expert 或 daisyui_creative_director。

更改 SnippetIDs、减少 payload 或仅使用 workflowId 都无法规避此问题,因为 v1.8.1 省略了必需的输出字段,例如 instructions、next step 和 workflow。

来源 Issue #4784
故障排除
如何修复 daisyUI Blueprint MCP 在 daisyui_quality_inspector 携带 renderedReview 重新运行时出现的 'Structured content does not match the tool's output schema' 错误?

将 daisyUI Blueprint MCP 服务器升级到 v1.6.3 或更高版本,该版本修复了损坏的 finalization 路径:

npm install daisyui-blueprint@1.6.3

然后重启 MCP 客户端/服务器,并使用相同的 workflowId、files 和已完成的 renderedReview 重新运行 daisyui_quality_inspector。如果由于 registry 传播延迟,npm 未能立即显示 v1.6.3,请等待后重试安装,或者使用 npm cache clean --force 清除 npm 缓存。

受影响版本:v1.6.1。在 v1.6.1 上,重试请求会产生相同的 schema 错误。作为临时变通方案,可以在自动化检查成功通过并完成文档中记录的手动检查后,将审计视为已完成,而不必等待 _meta.finalizationAllowed: true。

来源 Issue #4736
故障排除
为什么 DaisyUI Diff 组件在 Android 版 Firefox 上无法拖动?

Firefox for Android 能够识别 CSS resize 属性,但在触摸设备上会忽略它(Mozilla bug 1776834),因此 Diff 组件的拖拽手柄无法移动。DaisyUI PR #4762 通过添加与 iOS Safari 上已使用的相同的点击展开回退方案修复了此问题。请将 DaisyUI 更新到包含此修复的版本,然后在 Firefox Android 上点击 diff 的任一侧即可展开该侧,而无需拖拽手柄。

来源 Issue #4762
故障排除
为什么使用 input-primary 时 daisyUI 的 validator 不显示 error/success 颜色?该如何修复?

这是 daisyUI 5.2.4–5.7.40 中的一个 CSS 层叠顺序回归问题。诸如 input-primary 之类的颜色修饰符在 validator 之后生成,因此会覆盖 :user-invalid 和 :user-valid 状态。请使用 npm install daisyui@latest 升级到最新修复的 daisyUI 5.x 版本,然后重启开发服务器或重新构建。该修复将 validator 样式移至修饰符层,使其优先级高于颜色修饰符。作为临时解决方案,可以从被校验的控件中移除 input-primary,或为输入框添加更高优先级的覆盖样式:.input.validator:user-invalid { @apply border-error; } .input.validator:user-valid { @apply border-success; }。

来源 Issue #4766
故障排除
为什么 daisyUI 中标题为“with icon”的 navbar 示例没有显示图标?

示例中使用"icon"(图标)一词来指代内置的小型按钮符号:起始处的汉堡按钮(☰)和末尾的三点菜单(⋮)。如果你没有注意到它们,请查看导航栏的起始/结束部分。若要显示传统的图形图标,请将相关 <button> 内的文本符号替换为 SVG 或你的图标库中的图标。

来源 Issue #4741