去年发布作者：Pouya Saadeghi

daisyUI vs. Tailwind UI

哪个更好？我应该用哪个？比较 Tailwind CSS 组件库 daisyUI 和 Tailwind UI。

daisyUI 和 Tailwind UI 的比较

daisyUI 是 Tailwind CSS 的一个插件。它是一组额外的组件类，你可以在 HTML 文件中使用。
Tailwind UI 是由 Tailwind CSS 团队创建的 HTML 区块集合。

这两个组件库都构建在 Tailwind CSS 之上，并且都为你的网页提供了设计精良的组件。

但是哪个更适合你呢？你应该使用哪个？

核心差异

daisyUI 是 Tailwind CSS 的插件。它是一组额外的组件类，你可以在 HTML 文件中使用。

例如，要使用 daisyUI 创建一个按钮，你需要编写以下 HTML 代码

<button class="btn">Button</button>

使用 Tailwind UI，你需要使用 Tailwind CSS 实用程序类来创建一个按钮

<button
  class="rounded-md bg-indigo-600 px-3.5 py-2.5
  text-sm font-semibold text-white shadow-sm
  hover:bg-indigo-500 focus-visible:outline
  focus-visible:outline-2 focus-visible:outline-offset-2
  focus-visible:outline-indigo-600">
  Button
</button>

基本上，Tailwind UI 是一组 HTML 模板，你可以复制并粘贴到你的项目中，而 daisyUI 是一个插件，它为 Tailwind CSS 添加了超能力。

定价和成本

Tailwind UI 是一个商业产品。你需要购买个人许可证（299 美元）或团队许可证（799 美元）才能在你的项目中使用它。

daisyUI 是免费和开源的。你可以在你的个人和商业项目中使用它。但是，如果你想支持该项目，你可以捐赠给该项目💚

自定义

daisyUI 和 Tailwind UI 都是可自定义的。你可以使用实用程序类更改组件的设计。

暗黑模式和主题

Tailwind UI 只有它现在的样子。要添加暗黑模式或更改颜色，你需要向组件添加更多实用程序类。

daisyUI 自带内置的暗黑模式和 28 个其他内置主题。所有主题都开箱即用，你无需向组件添加任何额外的类。你也可以在几秒钟内创建你自己的 daisyUI 主题。

HTML 大小

通常，使用 Tailwind CSS 实用程序类会使你的 HTML 文件更大。你需要向元素添加大量类来设置样式。使用 daisyUI，你可以减少 88% 的类名，并且你的 HTML 大小将缩小约 79%。

CSS 大小和未使用的样式

daisyUI 和 Tailwind UI 都使用 Tailwind CSS 作为底层。Tailwind UI 使用与 Tailwind CSS 相同的实用程序类。daisyUI 使用作为插件添加的组件类。但是，它们都由 Tailwind CSS 编译，最终的 CSS 文件将仅包含使用的类，不包含任何未使用的 CSS 规则。

JavaScript 和交互性

Tailwind UI 中的某些组件是交互式的，它们需要 JavaScript 才能工作。

然而，daisyUI 是一个开发依赖项。它不需要任何 JavaScript 即可工作。它是一个纯 CSS 组件库，即使浏览器上禁用了 JavaScript，它也能很好地工作。daisyUI 提供了一些仅使用 CSS 即可实现的交互式组件。

daisyUI 不包含需要 JS 的交互式元素（例如日期选择器）。但是，你可以将任何 JS 库与 daisyUI 一起使用。推荐使用像Headless UI或Radix primitives这样的无头库。你也可以使用任何你喜欢的其他 JS 插件，并且你可以向它们添加 daisyUI 类或颜色值，以便它们适合你的网站设计。

可访问性

daisyUI 和 Tailwind UI 都提供了默认情况下可访问的 CSS 和 HTML 代码。组件的颜色和设计选择方式使其对每个人都可访问。但是，可访问性不是二元的，也不是可安装的。你应该始终测试你的网站是否存在可访问性问题，并根据你的客户需求和他们使用你的网站的方式来修复它们。

框架和库

Tailwind UI 是一组 HTML 区块，然而，交互部分仅适用于 React 和 Vue（在撰写本文时）。
daisyUI 与框架无关。它只是 CSS，你可以将其与任何框架或库一起使用。

你可以在 daisyUI 和 Tailwind UI 上使用第三方 JS 插件，甚至自己处理 JS 交互。

我应该使用哪个？

daisyUI 和 Tailwind UI 都是很棒的组件库。它们都为你的网页提供了设计精良的组件。但是，要为你的项目选择最佳组件库，你需要考虑你的项目需求和你团队的技能。

如果以下情况，Tailwind UI 更好

你正在使用 React 或 Vue
你愿意为个人或团队许可证付费
你想要将 HTML 代码块复制粘贴到你的项目中
你想要在所有地方使用单一设计

如果以下情况，daisyUI 更好

你想要一个免费和开源的组件库
你想要轻松更改网站的主题和外观
你想要使用一个可自定义和可主题化的组件库
你想要拥有多个可用的主题
你正在使用任何框架或库（甚至根本不使用 JS）
你想要向浏览器发送更少的 JS
你想要保持 HTML 代码的简洁

标签评价组件库

daisyUI 博客