DaisyUI 是一个用于构建用户界面的开源工具库，特别是与 Tailwind CSS 结合使用的插件。它为 Tailwind CSS 提供了一套功能强大的可定制的 UI 组件和实用工具，以简化 Web 应用程序和网站的开发过程。

特点

「大量 UI 组件」：DaisyUI 提供了许多常见的 UI 组件，如按钮、表单元素、模态框、警告框、标签、卡片等等。这些组件可以轻松地集成到项目中，无需手动编写样式代码
「可定制性」：DaisyUI 可以自定义每个组件的外观，以满足项目的设计需求。可以使用 Tailwind CSS 的类名来自定义组件的样式
「简化工作流程」：DaisyUI 提供了一些有用的实用工具，以简化常见的开发任务，例如表单验证、颜色选择器、日期选择器等
「轻松集成」：可以通过 npm 或 yarn 安装 DaisyUI，适用于所有 JS 框架，不需要 JS 捆绑文件
「文档和示例」：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>
    <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>
    <label class="label cursor-pointer">
      提交到新闻通讯
      <input type="checkbox" class="toggle" />
    </label>
    <button class="btn btn-neutral">保存</button>
  </div>
</div>

无限主题

daisyUI 为 Tailwind CSS 添加了一组可自定义的颜色名称，这些新颜色使用 CSS 变量作为值。使用 daisyUI 颜色名称，可以获得暗模式和更多主题，而无需添加新的类名称。

组件

53 组件、500+ 实用工具类。

Button 按钮

Card 卡片

Chat bubble 聊天气泡

Countdown 计数

Table 表格

Pagination 分页

Steps 步骤条

Code 代码

安装

作为 Tailwind CSS 的插件来安装 daisyUI。

Tailwind 插件

安装 daisyUI:

npm i -D daisyui@latest

然后，在 tailwind.config.js 文件里追加 daisyUI 的设置:

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

使用 CDN

不需要安装任何依赖。只需要在的 HTML 的 head 添加下面的代码:

daisyUI 3.7.3 CSS file + Tailwind CSS CDN script:

<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>