Skip to main content

浅尝 DaisyUI

· 6 min read
Chengzihan

1

了解 DaisyUI​

DaisyUI​

快速链接

根据其官网介绍，得知 DaisyUI 是最流行, 免费以及开源的 Tailwind CSS 组件库。它有下面的优点：

  • Tailwind CSS 的插件
  • 快速开发
  • 更纯净的 HTML
  • 深度自定义、可定制主题
  • 纯净 CSS、支持任意框架（Vue、React、Angular等）

Tailwind CSS​

1

快速链接

Tailwind CSS是一个CSS样式库，它为我们提供了构建定制设计而无需使用自定义样式所需的所有构建块，在国外开发中十分流行。Tailwind 的组件十分有设计感，并且它在最新的2.0版本中加入了深色模式，开箱即用，无需配置。DaisyUI 就基于 Tailwind 进行开发。

前提工作​

可以在 Vue.js 中进行尝试，现在我们开始安装一个 Vue2 工程。 

vue init webpack DaisyuiUse

1

安装 DaisyUI​

前提条件：

  • Node.js
  • Tailwind 脚手架。由于 DaisyUI 是一个 Tailwind 插件，所以我们必须先下载引入 Tailwind。

安装 Tailwind​

首先通过控制台进行安装。 

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

然后初始化： 

npx tailwindcss init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。

安装 DaisyUI​

npm i daisyui

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

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

创建 css 文件​

打开vue项目，在src目录下新建一个css文件：index.css，在文件中写入： 

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

在 main.js 中引入 index.css。 打开vue项目中刚刚配置新建的 tailwind.config.js ，更改配置 Purge:[ ]，写入如下代码： 

'./index.html', 
'./src/**/*.{vue,js,ts,jsx,tsx}'  //包含了src文件夹下所有的vue,js等等文件

安装完成了，我们就可以开始使用 DaisyUI 了。

在 Nuxt.js 中尝试​

在 React 中尝试​

全局配置​

可以通过 tailwind.config.js 来配置 daisyUI 的配置。 默认配置:

module.exports = {
  //...

  // add daisyUI plugin
  plugins: [require("daisyui")],

  // daisyUI config (optional)
  daisyui: {
    styled: true,
    themes: true,
    base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: "",
    darkTheme: "dark",
  },
}

参数说明​

styled​

  • Boolean (default: true)

如果设置为 true，组件会有默认的颜色和样式，所以你不需要去进行设计。 如果设为 false，组件是没有颜色和视觉样式的，所以你可以在一个基本的骨架上设计你自己的颜色和视觉样式。

themes​

  • Boolean or array (default: true)

如果设为 true，则会包含所有的主题。 如果设为 false，只有 light（默认主题）会被加载。 如果是一个数组，则只有数组包含的主题会被加载，数组的第一个主题会成为默认主题。 在阅读更多关于主题的内容

base​

  • Boolean (default: true)

如果设为 true，一些基础样式 会被添加。

utils​

  • Boolean (default: true)

如果设为 true，响应式和工具类会被添加

logs​

  • Boolean (default: true)

如果设为 true，daisyUI 会在 CSS 构建时在命令行窗口输出日志。

rtl​

  • Boolean (default: false)

如果设为 true，你的主题会是从右向左展示。你需要在你的 body 标签添加dir='rtl'。 如果你在 daisyUI 中使用 RTL 选项，我建议使用tailwindcss-flip 插件，因为这个插件可以自动帮助你翻转所有 Tailwind 工具类。

darkTheme​

  • String (default: "dark")

选择另一个主题作为系统自动黑暗模式的主题。dark 是默认黑暗模式主题（或者自定义的主题名字是 dark）。通过这个配置，你可以给默认黑暗模式主题设定另一个主题。

prefix​

  • String (default: "")

给 daisyUI 的类名称增加一个前缀（包含所有的组件类，修饰类和响应类）。 例如：btn 会变为 prefix-btn。 如果你还使用其他的 CSS 库，并且有冲突，可以用这个方法来避免冲突问题。 颜色名字（例如： bg-primary）或者 border-radius（例如：rounded-box）不会受到这个参数的影响，因为这些参数是作为 Tailwind CSS 类的扩展来设计的。 daisyUI 的prefix 的功能（例如daisy-）与 TailwindCSS 的prefix 的功能（例如 tw-）一起使用时，最后的类名是 tw-daisy-btn。

使用举例​

创建按钮​

在 DaisyUI 中，我们可以使用 class 类直接声明组件。 

<button class="btn">Button</button>

可以通过增加 daisyUI 组件类来修改这个组件: 

<button class="btn btn-primary">Button</button>

也可以通过 TailwindCSS 的工具类来改变这个组件的样式: 

<button class="btn w-64 rounded-full">Button</button>