daisyUI 将 Tailwind CSS 冗长的工具类转化为简洁组件
任何使用 Tailwind CSS 构建过界面的人都深知这种痛苦。打开一个标记文件，一个普通的按钮就要占四行代码。几十个类名：内边距、圆角、背景、悬停状态、焦点状态、按下状态。
一方面，这种工具类方法给了你对样式的完全控制权。但另一方面，几个月后再看这样的标记，简直痛苦难忍。
daisyUI 库正是为了解决这一问题而生。它将 btn、card、modal 等熟悉的语义化类名带回 Tailwind，同时保留了配置的灵活性。
底层原理
该项目由开发者 Pouya Saadeghi 创建并维护。仓库已在 GitHub 上获得了超过 4.2 万颗星。目前该库正在积极开发第五个主要版本。
本质上，daisyUI 是作为 Tailwind CSS 的插件运行的。其主要特点是底层没有任何 JavaScript，是纯 CSS。这使得组件易于在任何地方集成：无论是 React、Vue、Svelte、Angular，还是使用 Django、Laravel 和 Go 的常规服务端模板。
如果你需要下拉菜单或模态框，它们可以在原生 HTML 元素 <dialog> 和 <details> 上工作，或通过 CSS 选择器实现。你可以使用项目中已有的技术栈自行编写状态管理逻辑。
daisyUI 与其他 UI 库的区别
让我们比较一下普通按钮的标记。在纯 Tailwind 中，一个基本的蓝色按钮需要写一长串类名：
<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Сохранить
</button>
在 daisyUI 中，同样的效果可以用更简洁的方式实现：
<button class="btn btn-primary">
Сохранить
</button>
同时，你仍然可以随时使用熟悉的 Tailwind 工具类选择性覆盖任何参数。想要让按钮稍微宽一点或重置阴影？只需在 class 属性中添加 w-full 或 shadow-none 即可。
主要特性
该库开箱即用，提供了几个不错的功能。
现成的语义化组件。组件目录包含约五十个现成元素：表格、徽章、分页、手风琴、面包屑和输入表单。标记保持简洁，布局速度加快。
内置主题系统。项目提供超过三十个内置设计主题，包括暗色、亮色、复古和赛博朋克风格。切换主题只需设置一个 HTML 属性即可：
<html data-theme="dark">
你可以通过配置文件中的 CSS 变量配置自己的调色板，无需重写每个单独元素的样式。
打包体积节省。由于这是 Tailwind 插件，打包工具会移除所有未使用的选择器。只有实际出现在模板中的 CSS 才会进入生产环境。
库的最佳使用场景
daisyUI 在以下几种场景中特别有用：
- 快速原型和 MVP 开发。当你需要在几个晚上组装一个可用的管理后台或个人账户界面，而不想花几个小时去调整每个输入框时。
- 服务端渲染项目和 HTMX。由于不需要 JS 运行时，组件非常适合使用 Go、Python 或 Ruby 的单体应用。
- 个人项目。在不聘请设计师的情况下获得整洁设计的好方法。
美中不足
如果你正在处理一个来自工作室的复杂、独特设计稿，daisyUI 的默认样式可能会成为障碍。你会发现自己在不断覆盖组件的基础圆角或内部内边距。在这种情况下，使用纯 Tailwind 或 Radix UI、Headless UI 这类无头库会更简单。
daisyUI 在界面构建速度和标记简洁性之间取得了很好的平衡。如果你喜欢 Tailwind 的理念，但厌倦了代码中无尽的工具类，这个项目绝对值得在你下一个个人项目或管理后台中测试。
通过 npm i -D daisyui@latest 安装只需几分钟，之后只需将插件添加到样式配置中即可。
相关项目