DaisyUI 项目使用教程

裘旻烁

于 2025-04-16 16:48:02 发布

阅读量422

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00250/article/details/147281054

版权

DaisyUI 项目使用教程

daisyui 🌼 Soothing pastel theme for daisyUI 项目地址: https://gitcode.com/gh_mirrors/dai/daisyui

1. 项目目录结构及介绍

DaisyUI 是一个基于 Tailwind CSS 的优雅 UI 框架。以下是项目的目录结构及其简要介绍：

catppuccin/
├── assets/               # 存放静态资源，如图片、字体等
├── example/              # 示例文件夹，包含了一个简单的 HTML 示例
├── src/                  # 源代码文件夹
├── .github/              # GitHub 工作流配置
├── .vscode/              # Visual Studio Code 项目配置
├── CHANGELOG.md          # 更新日志
├── LICENSE               # MIT 许可证
├── README.md             # 项目说明文件
├── eslint.config.js      # ESLint 配置文件
├── package.json          # 项目依赖及脚本
├── pnpm-lock.yaml        # pnpm 锁文件
├── pnpm-workspace.yaml   # pnpm 工作空间配置
├── renovate.json         # Renovate 配置文件
├── tsconfig.json         # TypeScript 配置文件
└── tsup.config.ts        # tsup 配置文件

2. 项目的启动文件介绍

在 example/ 文件夹中，有一个名为 index.html 的文件，这是项目的启动文件。该文件展示了如何使用 DaisyUI 的组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DaisyUI Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daisyui@latest/dist/full.css">
</head>
<body>
  <!-- DaisyUI 组件示例 -->
  <div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-8">
    <button class="btn">Default</button>
    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-accent">Accent</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-error">Error</button>
  </div>
</body>
</html>

在这个文件中，我们通过 CDN 引入了 DaisyUI 的 CSS 文件，并展示了一些基本的按钮组件。

3. 项目的配置文件介绍

项目的配置主要集中在 tailwind.config.js 文件中。这个文件定义了 Tailwind CSS 和 DaisyUI 的配置。

import catppuccin from '@catppuccin/daisyui'

module.exports = {
  content: [
    './src/**/*.{js,ts}',
    'index.html'
  ],
  plugins: [
    require('daisyui')
  ],
  daisyui: {
    themes: [
      catppuccin('latte'),
      catppuccin('frappe', 'pink'),
      catppuccin('macchiato', { primary: 'maroon' }),
      catppuccin('mocha', { primary: 'sky', secondary: 'rosewater' }),
      'light' // 默认主题
    ]
  }
}

在这个配置文件中，我们导入了 catppuccin/daisyui 并定义了几个主题，每个主题都可以通过修改 catppuccin 函数的参数来自定义颜色。最后，我们设置了一个默认的 'light' 主题作为后备。

daisyui 🌼 Soothing pastel theme for daisyUI 项目地址: https://gitcode.com/gh_mirrors/dai/daisyui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考