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,您可以使用单个类来制作按钮,然后可以使用实用程序类对其进行自定义。对于其他组件库,您可以使用复制/粘贴 100 个类名来制作一个按钮,然后您可以通过编辑它们来自定义它。btn
如何使用dailyUI?
要使用 daisyUI,您需要安装 Node.js 和 Tailwind CSS。
- 使用 npm 安装 daisyUI:
npm i -D daisyui@latest
- 然后将 daisyUI 添加到 tailwind.config.js 文件中:
module.exports = {
//...
plugins: [require("daisyui")],
}