daisyUI - 我找到了理想中的 UI 库

我已经有几年时间没有使用 UI 库，近几年的项目我都是从头开始写 UI，小到按钮、对话框，大到响应式布局。原因是以前的 UI 库样式千篇一律，又难以定制，我宁愿从头开发。

重复了几次后，我感觉累了。UI 优化是没有尽头的，工作量已经影响到功能开发。有时我会觉得，如果自己没有 CSS 经验，就不会花那么多时间在 UI 上了。

最近开始一个新项目的时候，我决定放弃什么都自己做的想法，选一个过得去的 UI 库。我想尽快完成功能，而不是过早优化 UI。经过挑选后，我选择了 daisyUI。使用一段时间后，我感觉找到了理想中的 UI 库，所以写这篇博客分享一下。

与 Tailwind CSS 兼容

daisyUI 是 Tailwind 的一个插件，需要基于 Tailwind 的配置和构建工具。这对我是一个加分项，因为我能理解和接受 Tailwind 的理念，本来就打算使用 Tailwind。

成为 Tailwind 插件的一个好处是可以借助 Tailwind 的 VS Code 扩展进行补全：

足够多的组件样式

Tailwind 的理念是不要过早抽象，尽量使用实用类和组件模版。不过实际中还是有很多组件样式应该提取类，例如 btn，menu，navbar 等等。如果没有，开发中就需要很多复制粘贴，或者自己提取类。

daisyUI 主要作用就是提供了最常用的组件样式，可以直接使用 btn 等样式。

不依赖 JS 框架

daisyUI 不依赖特定 JS 框架，例如 Vue、React，而是使用原生的 HTML/CSS/JS。

像 menu 组件提供了三种实现方法：<details> <summary> 元素，popover API 还有 tabindex，都是基于原生的 HTML/CSS/JS。

                                                    Focusable button
                                                            │
<div>                                                       │
  <div tabindex="0" role="button">Click to open</div>  ─────╯
  <div tabindex="0">Content</div>   ───────╮ 
</div>                                     │
                           Content shown when button is focused

定制化

daisyUI 可以用 Tailwind 的实用类定制：

<button class="btn rounded-full">One</button>
<button class="btn rounded-none px-16">Two</button>

也可以把定制全局化：

@utility btn {
  @apply rounded-full;
}

主题

daisyUI 通过 CSS 变量实现主题，主题包括颜色、尺寸等。

daisyUI 内置了 35 个主题，也可以新增自己的主题。

总结

daisyUI 满足了我对 UI 库的主要期望：开箱即用和高度可定制，让我开发项目节省了很多时间。

推荐有需要的开发者尝试。