什么是 daisyUI？（以及我经常被问到的其他问题）

daisyUI 是否违背了 Tailwind CSS 的理念？我们是否在绕圈子？为什么不直接使用 Bootstrap？在这里，我回答一些关于 daisyUI 最常见的问题。

什么是 daisyUI？

daisyUI是一个 Tailwind CSS 的组件库。虽然 Tailwind CSS 为每个 CSS 规则提供了实用程序类，但 daisyUI 为 Tailwind CSS 提供了额外的组件类名，使其更快更轻松地构建网页。

daisyUI 是否违背了 Tailwind CSS 的理念？

不是。 daisyUI 构建于 Tailwind CSS 之上。“实用至上”的方法建议您应该为大多数 CSS 规则使用实用程序类，但这并不意味着您应该只使用实用程序类. 可能会令人惊讶，但 Tailwind CSS 具有用于创建组件类的 API（daisyUI 使用了它），并且 Tailwind CSS 本身也提供了一些组件类以及实用程序类。

它被称为“实用至上”，而不是“仅实用”

Tailwind CSS 还不够吗？为什么我们需要在 Tailwind CSS 之上构建组件库？

事实是使用实用程序类对于大多数人来说是不切实际的。

• 它需要设计知识，因为您需要为您元素使用的每个 CSS 规则做出设计决策。
• 它需要深入的 CSS 知识，因为您基本上为所有内容都使用了简写 CSS 规则。
• 它会创建臃肿的 HTML 文件。您需要向单个元素添加数百个类才能设置其样式。
• 它不快。您需要为您要使用的每个 CSS 类进行思考和决定。
• 您需要考虑元素的每种状态，例如悬停、焦点、活动等，并为它们也添加类。
• 它不易于维护。您的 HTML 文件中最终会包含大量类，并且很难找到和更改它们。
• 仅使用实用程序类基本上是在多次重复发明轮子。您需要编写大量 CSS 类才能制作一个简单的元素，该元素看起来与您之前制作的元素完全相同。

所以，与其仅实用不如保持实用至上 当我们需要自定义时，让我们使用实用程序类 当我们需要速度时，使用组件类

但是我们已经有了 Bootstrap。我们是否在绕圈子？

这就是 Tailwind CSS 和实用程序类真正闪光的地方。 Bootstrap 和类似的组件库最大的问题是它们不可自定义。如果不覆盖大量的 CSS 规则，您就无法更改组件的设计。自定义 Bootstrap 非常困难，以至于几乎每个 Bootstrap 网站看起来都一样。 当组件库构建在 Tailwind CSS 之上时，这不会成为问题。您只需向每个组件添加实用程序类即可自定义其设计。没有比这更容易的了。 现在您既拥有组件类名的速度，又拥有实用程序类名的灵活性。

daisyUI 适合哪些人？

daisyUI 适合那些想要快速构建网页，但也希望能够自定义组件设计的人。

使用实用程序类对于大多数人来说是不切实际的。它不快，也不易于维护。

使用仅组件类也不切实际。它不够灵活，也不可自定义。

在这两种方法之间应该取得平衡，使我们能够同时获得速度和灵活性。

在实用程序类之上构建组件类是两全其美的方法。

哪些人不应该使用 daisyUI？

如果您不需要预制组件，daisyUI 就不适合您。如果您想从头开始构建一切，则不需要 daisyUI。Tailwind CSS 提供了您所需的一切。

daisyUI 与其他 Tailwind CSS 组件库有何不同？

daisyUI 提供简短、直观且易于记忆的类名。 其他 Tailwind CSS 组件库通常使用仅实用程序方法，这会导致 HTML 文件臃肿，其中包含大量类名。

基本上，使用 daisyUI，您可以使用单个btn类来制作一个按钮，然后您可以使用实用程序类对其进行自定义。使用其他组件库，您需要复制/粘贴 100 个类名来制作一个按钮，然后您可以通过编辑它们来对其进行自定义。

如何使用 daisyUI？

要使用 daisyUI，您需要安装Node.js和Tailwind CSS.

1. 使用 npm 安装 daisyUI

npm i -D daisyui@latest

2. 然后将 daisyUI 添加到您的 tailwind.config.js 文件中

module.exports = {
  //...
  plugins: [require("daisyui")],
}

阅读更多关于如何安装 daisyUI和如何使用 daisyUI.