备受全球喜爱的 Tailwind CSS 组件库：daisyUI

组件库概述

前端开发的小伙伴们对组件库应该都不陌生了，尤其是像 ElementUI、Ant Design、NutUI 这些耳熟能详的库。不过你们有没有注意到，国内的许多组件库在风格上大多趋同，似乎都有相互借鉴的影子，导致样式差别不大。

不少人说国外的组件库更具创意，最近我也特意体验了一些国外的热门库。今天就带大家认识一款广受欢迎的 UI 组件库，看看它是否真的像传言那样“别具一格”，就等大家来评判了！

核心特点

• • 丰富的 UI 组件： DaisyUI 提供了多种常见的组件，包括按钮、表单、模态框、卡片、通知框等，用户可以直接调用并集成这些组件，无需再手动编写样式。开发者可通过 DaisyUI 提供的丰富组件库（53个组件和超过500种实用类）大幅减少开发时间。
• • 灵活的定制性： DaisyUI 在可定制性方面表现出色。每个组件都可以使用 Tailwind 的类名自定义样式，符合项目需求，适应多种 UI 设计风格。此外，DaisyUI 支持主题定制，允许通过颜色变量快速切换暗模式和其他自定义主题。
• • 开发工作流的简化： 通过集成常用的实用工具（如表单验证、日期选择器、颜色选择器等），DaisyUI 可以让开发者专注于业务逻辑的实现，大幅简化开发工作流程。无需额外引入其他依赖即可实现多种实用功能。
• • 轻松集成： DaisyUI 提供灵活的安装方式，既可以通过 npm 或 yarn 安装用于任何 JavaScript 框架中，也支持 CDN 加载，适合快速原型开发和小型项目。在安装后，只需在 Tailwind 配置文件中添加 DaisyUI 插件即可轻松使用。
• • 详细的文档和示例： DaisyUI 提供了清晰的文档和使用示例，方便开发者迅速了解每个组件的用法及可选项。这些资源可以通过 daisyui.com 直接访问。

部分组件预览：

主题风格

亮色

黑暗风

night

多种主题风格可以选择，支持在线一键预览

组件

radio

button按钮

Swap开关

警告

tab

表格

导航

聊天气泡

卡片

使用示例：快速对比 Tailwind 和 DaisyUI 组合的组件

传统 Tailwind 示例：

<div class="w-80 rounded-2xl bg-gray-100">
  <div class="flex flex-col gap-2 p-8">
    <input placeholder="Email" class="w-full rounded-lg border border-gray-300 bg-white px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-offset-2 focus:ring-offset-gray-100" />
    <label class="flex cursor-pointer items-center justify-between p-1">
      接受使用条款
      <div class="relative inline-block">
        <input type="checkbox" class="peer h-6 w-12 cursor-pointer appearance-none rounded-full border border-gray-300 bg-white checked:border-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-2" />
        <span class="pointer-events-none absolute left-1 top-1 block h-4 w-4 rounded-full bg-gray-400 transition-all duration-200 peer-checked:left-7 peer-checked:bg-gray-900"></span>
      </div>
    </label>
    <button class="inline-block cursor-pointer rounded-md bg-gray-700 px-4 py-3.5 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-700 focus-visible:ring-offset-2 active:scale-95">保存</button>
  </div>
</div>

Tailwind + DaisyUI 示例：

<div class="card bg-base-200 w-80">
  <div class="card-body">
    <input placeholder="Email" class="input input-bordered" />
    <label class="label cursor-pointer">
      接受使用条款
      <input type="checkbox" class="toggle" />
    </label>
    <button class="btn btn-neutral">保存</button>
  </div>
</div>

自定义主题支持

DaisyUI 通过新增的 CSS 变量和颜色名称支持多主题管理，用户可根据项目需求自定义颜色方案，并轻松实现暗模式等主题切换，无需额外编写类名。开发者可通过修改 CSS 变量或在配置文件中定义多个主题，实现组件的全局样式统一。

安装和快速开始

DaisyUI 兼容 Tailwind CSS 插件系统，通过如下步骤即可安装： 1.通过 npm 安装：

npm i -D daisyui@latest

2.在 Tailwind 配置文件 tailwind.config.js 中引入 DaisyUI：

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

3.使用 CDN：

<link href="https://cdn.jsdelivr.net/npm/daisyui@3.7.3/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>

组件库地址

https://daisyui.com

结语

DaisyUI 采用 MIT 开源协议，用户可以免费使用并根据需求进行修改和扩展。其 GitHub 仓库上提供源码、社区支持及贡献机会，使 DaisyUI 成为一个不断发展的 UI 解决方案。

DaisyUI 提供了强大而灵活的 UI 组件库，可以显著减少开发者的样式编写工作量，提高项目的开发效率。

看看