DaisyUI 入门指南：简单打造美观的Tailwind CSS 元件

什么是DaisyUI？ DaisyUI 是一款基于Tailwind CSS 的UI 元件库，提供一组预设风格的元件，帮助开发者快速建立美观且一致的UI，无需手写额外的CSS 样式。 为什么选择DaisyUI？ 与Tailwind CSS 完美整合：可以直接使用Tailwind 的公用类别，同时享有额
  • 本文作者
  • 文章发布日期 2023-08-25 11:30
  • 热度 1
  • 本文共计
  • 预计阅读

什么是 DaisyUI？

DaisyUI 是一款基于 Tailwind CSS 的 UI 元件库，提供一组预设风格的元件，帮助开发者快速建立美观且一致的 UI，无需手写额外的 CSS 样式。

为什么选择 DaisyUI？

  • 与 Tailwind CSS 完美整合：可以直接使用 Tailwind 的公用类别，同时享有额外的 UI 元件。

  • 内建多种主题：可轻松切换不同配色风格，支援暗色模式。

  • 简单易用：透过类别名称即可快速建构按钮、卡片、表单等元件。

  • 高度自定义：可以依照需求自订元件样式，灵活度极高。

如何安装 DaisyUI？

1. 透过 CDN 快速引入（适用于测试）

若想立即试用 DaisyUI，可直接使用 CDN 引入 Tailwind CSS 与 DaisyUI：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DaisyUI Demo</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            plugins: [window.daisyui],
        }
    </script>
</head>
<body class="p-6">
    <button class="btn btn-primary">点击我</button>
</body>
</html>

2. 在专案中安装 DaisyUI（推荐）

若要在 Tailwind CSS 项目内使用 DaisyUI，建议透过 NPM 安装。

步骤 1：安装 Tailwind CSS 与 DaisyUI

npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p  # 产生 Tailwind 配置文件

步骤 2：设定 Tailwind 配置

开启 tailwind.config.js，并加入 DaisyUI 插件：

module.exports = {
  content: ["./*.html", "./src/**/*.{js,ts,jsx,tsx}", "./components/**/*.{vue,js}"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
};

步骤 3：在 CSS 项目中引入 Tailwind

在 styles.css 文件中加入：

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤 4：启动开发伺服器

npx tailwindcss -o output.css --watch

这样你就能在 HTML 或 JSX 中使用 DaisyUI 提供的元件！

DaisyUI 基本用法

1. 按钮（Button）

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-accent">强调按钮</button>

2. 输入框（Input）

<input type="text" placeholder="输入文字" class="input input-bordered w-full max-w-xs" />

3. 卡片（Card）

<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="https://via.placeholder.com/150" alt="示范图片" /></figure>
  <div class="card-body">
    <h2 class="card-title">卡片标题</h2>
    <p>這是一个使用 DaisyUI 建立的卡片元件。</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">阅读更多</button>
    </div>
  </div>
</div>

4. 响应式设计与主题变更

DaisyUI 提供多种预设主题，并可通过 data-theme 属性切换：

<div data-theme="dark">
  <button class="btn btn-primary">暗色模式按鈕</button>
</div>

结语

DaisyUI 是一款强大的 Tailwind CSS 扩充工具，能让开发者快速建立美观的 UI，同时保留 Tailwind CSS 的灵活性。