简介

什么是 daisyUI，以及你为什么要使用它？

什么是 daisyUI？

daisyUI 是 CSS 类名的集合。这些类名是 Tailwind CSS 实用程序类的高级抽象。
想象一下，你使用的 Tailwind CSS 拥有超能力！

daisyUI 是如何工作的？

daisyUI 是一个 NPM 包，你可以将其作为开发依赖项安装在你的项目中。
然后你将其作为插件添加到 Tailwind CSS 中。这使得所有 daisyUI 类名都可用于 Tailwind CSS，你可以像使用任何其他 Tailwind CSS 类名一样使用它们。

daisyUI 使用 Tailwind CSS 插件 API 来扩展可用的 Tailwind CSS 类名。这意味着 daisyUI 与 Tailwind CSS 完全兼容，你可以将其与任何 Tailwind CSS 项目一起使用。

我为什么要使用 daisyUI？

如果你有以下情况，daisyUI 适合你

厌倦了重复编写数千个实用程序类名
想要更易读和可维护的代码
需要以更少的代码更快地设计界面
想要跨项目保持一致的设计系统
想要使用标准的 UI 部件，而无需为每个细节做出设计决策
想要开箱即用的暗黑模式和许多其他主题
想要使用基于真实世界 UI 设计原则的设计系统
想要同时兼顾开发速度和自定义

如果你有以下情况，daisyUI 不适合你

想要浪费时间为每个项目重新发明所有标准的 UI 部件，如按钮、卡片、复选框等。
想要在数千个类名的海洋中畅游，永远找不到出路。
想要让你的代码库一团糟，并花费数小时来弄清楚代码的哪个部分负责 UI 的哪个部分。
想要浪费你的时间和金钱重新发明轮子，而不是交付你的实际项目。

daisyUI 和 Tailwind CSS 之间有什么区别？

Tailwind CSS 提供低级实用程序类，通常只包含一个 CSS 规则。
daisyUI 类是多个 CSS 规则的组合，这些规则根据 UI 的每个部分语义命名。

例如，Tailwind CSS 类名决定填充应该是 4px 还是 8px。daisyUI 类名决定 HTML 元素应该看起来像一个卡片，一个按钮，一个切换等等，就像我们在设计系统中语义上称呼它们一样。

这使得用更少的代码和更高的代码一致性来设计界面变得更容易。例如，如果你想使用 Tailwind CSS 制作卡片，你必须为每个 CSS 规则编写一个或多个实用程序类名。为每个元素、每个页面、每个项目一遍又一遍地这样做既耗时又难以管理。它也使维护你的代码变得更加困难，因为你必须始终弄清楚代码的哪个部分负责 UI 的哪个部分。

daisyUI 通过提供基于 UI 部件命名的高级类名来解决这个问题。例如，要制作卡片，我们只需使用卡片类名，daisyUI 会为你提供所有必要的 CSS 规则来制作卡片。然后，如果你需要额外的自定义，你可以向元素添加 Tailwind CSS 实用程序类，使其看起来符合你的需求。

daisyUI 不是 Tailwind CSS 的替代品，它是一个插件，使 Tailwind CSS 更强大、更易于使用。

daisyUI 是否符合 Tailwind CSS 的实用程序优先理念？

是的！它是实用程序优先，而不是仅实用程序。

daisyUI 构建于 Tailwind CSS 的组件 API 之上。Tailwind CSS 作为一个库，提供实用程序类，并建议使用实用程序类以获得最大的灵活性和自定义性。然而，这意味着更慢的开发和更多的代码要编写。
这就是为什么许多人发现很难使用 Tailwind CSS 设计界面。需要专业的设计师为 UI 的许多细节做出设计决策，以使其看起来美观。编写 UI 每个部分的所有实用程序类名也需要大量时间。即使复制和粘贴那些大量的实用程序类名也无济于事，因为它使代码库难以阅读和维护。

想象一下，光谱的一侧是最大的自定义和灵活性，你应该为每个细节做出设计决策。光谱的另一侧是最大的开发速度和更少的代码要编写，但你无法控制设计。daisyUI 和 Tailwind CSS 一起为你提供两全其美的效果。
使用 daisyUI 类名编写更少的代码并更快地开发，并在需要时使用 Tailwind CSS 实用程序类自定义设计。

这是一个完整的循环吗？
如果你多年前一直在使用 Bootstrap，你可能会认为回到使用组件没有意义。

但这里有一个问题：Bootstrap 的问题不是类名！Bootstrap 类名实际上非常容易使用。问题是缺乏自定义和灵活性。在某些时候，每个 Bootstrap 网站看起来都一样，除非你打开 CSS 文件并编写大量的自定义 CSS。
Tailwind CSS 解决了自定义和灵活性的问题，但代价是更慢的开发和更多的代码要编写！你想要自定义和灵活性？祝你好运，为页面中的每个像素做出设计决策！这不是一种实用的方法，对吧？

我们需要同时兼顾自定义开发速度。daisyUI 在这里使这成为可能。

daisyUI 如何融入原子设计原则？

原子设计是一种用于创建设计系统的方法。它将 UI 分解为更小的部分，如原子、分子、生物体等。

你可以将 Tailwind CSS 实用程序类视为原子。它们是 UI 的最小部分，你可以使用它们来构建更大的部分。daisyUI 类就像分子和生物体。它们是由原子组成的 UI 部件的更高级别抽象。

通过在布局中将这些分子和生物体放在一起，使用网格或 flexbox，并向它们添加功能和内容，可以快速实现更大的 UI 部分，如模板和页面。

daisyUI 是免费的吗？

是的，daisyUI 是免费且开源的，基于 MIT 许可证。你可以在任何项目中使用它，无论是商业项目还是非商业项目，没有任何限制。

为什么它是免费的？daisyUI 的目标是改善每个人的 Web 开发体验。我认为 Web 开发已经足够复杂了，有各种不同的技术、框架和工具。学习和掌握所有这些工具需要大量的时间和精力。daisyUI 在这里使 Web 开发的设计部分更容易和更快，因此你可以专注于你正在构建的实际产品。

我如何支持 daisyUI？

你可以通过在你的项目中使用 daisyUI、与你的朋友和同事分享它以及在 GitHub 上为该项目做出贡献来支持 daisyUI。你也可以通过在 GitHub 或 Open Collective 上成为赞助商来支持 daisyUI。

我可以在没有 Tailwind CSS 的情况下使用 daisyUI 吗？

是的，daisyUI 可以独立使用，无需 Tailwind CSS。但是，建议将 daisyUI 与 Tailwind CSS 一起使用。原因如下
daisyUI 提供了你可以用来制作网站的 UI 片段。如按钮、切换、卡片等。你需要一些东西将这些片段粘合在一起！例如，你需要 flex box、grid、padding、margin 等。Tailwind CSS 提供了这些低级实用程序类，你可以使用它们将 UI 片段粘合在一起。因此，daisyUI 和 Tailwind CSS 是完美匹配。你可以使用 daisyUI 设计 UI 部件，并使用 Tailwind CSS 进行布局、间距、字体大小和其他低级 CSS 规则。

或者，如果你不想使用 Tailwind CSS，你可以使用 daisyUI 来制作组件，并为你自己的布局、间距等编写样式。