daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

释放双眼,带上耳机,听听看~!

漂亮有特色的 CSS 组件库,组件代码非常简洁,也支持深度定制主题、定制组件,可以搭配 Vue / React 等框架使用。

关于 daisyUI

daisyUI 是一款极为流行的 CSS UI 组件库,作者 Pouya Saadeghi 基于大名鼎鼎的 Tailwind CSS 框架构建的组件库。截止发文日期,已经在 Github 得到 11,200 Star, 944,600 次 NPM 安装。

daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

Tailwind CSS 是一个功能类优先的 CSS 框架,通过类似于 .flex、.pt-4、.text-center、.rotate-90 这种原子类组合的 class 名快速构建网站,在 HTML 代码上就能完成开发,不需要再自己想各种 CSS 命名。

daisyUI 作为 Tailwind CSS 的组件库,不仅继承了它的优点,而且代码更简洁,主题非常漂亮有特点,打开官网就喜欢上它了。

daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

daisyUI 的技术特性

  • 提供 45 个常用组件,多达 29 款主题,款款都是精品
  • 相比 Tailwind CSS 的原子类,daisyUI 采用语义化的 class 名,写出更纯净的 HTML
  • 支持深度自定义、可定制主题
  • 是一个纯净 CSS 组件,所以支持和任意 Vue / React 这样的框架一起使用
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

开发上手体验和使用感受

首先说说我最喜欢的主题,daisyUI 提供了 29 款主题,配色很舒服,各有特色,我首先想到用来做个人网站的主题,一定会很酷。

主题风格预览

安装和使用

需要注意的是,使用 daisyUI 前,需要和 Tailwind CSS 一起安装,最简单的方式是 cdn 引入:

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

生产环境更推荐用 npm 的方式,这样打包出来的项目会小很多:

安装 daisyUI

npm i daisyui

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

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

“反” Tailwind CSS

使用过 Tailwind CSS 的开发者一定对这种写一堆 class 名来构建组件的方式印象很深刻,我一直没有推荐 Tailwind CSS,就是因为个人实在不喜欢零零碎碎的 CSS 类名,我更倾向于写语义清晰的类名来开发组件。我们来看看实现一个常规的按钮,两种写法的区别:

<!-- Tailwind CSS 的写法 -->
<a class="inline-block px-4 py-3 text-sm font-semibold 
    text-cente text-white uppercase transition
    duration-200 ease-in-out bg-indigo-600 
    rounded-md cursor-pointer
    hover:bg-indigo-700">Button</a>

<!-- daisyUI 的写法 -->
<a class="btn btn-primary">Button</a>

daisyUI 的写法实在太简洁了,所以说 daisyUI 简直是“反” Tailwind CSS 思路一点也不为过,不过 Tailwind CSS 的作者认为语义化的 CSS 并不好维护,因为随着项目的迭代,很多 class 名早已失去了原有的意义了。各位前端小伙伴,你们觉得呢?

daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

45 个组件如果没法满足,官方还提供了自定义组件的工具类,开发者可以快速构建自定义组件。官网提供了详尽的中文文档,纯 CSS 本身也易懂,对应的组件也有 HTML 代码例子,上手使用完全不是问题。

daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名
daisyUI:代码纯净且主题设计漂亮的免费开源 Tailwind CSS 组件库,不需要堆砌 class 名

总的来说,这是一款漂亮、流行,代码简洁的 web UI 组件库,熟悉以后能提高开发效率,不妨写个快速 demo 尝试一下。

免费开源说明

daisyUI 是基于 Tailwind CSS 构建的 CSS 组件库,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用,也可以用于商业项目。

网站地址

开源仓库

本站所有文章,如无特殊说明或标注,均为本站原创发布;任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台;如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

《关于网站内隐藏内容的介绍及理由》

如果下载链接失效的话,请劳烦您在评论区反馈,以便我们及时处理。

给TA打赏
共{{data.count}}人
人已打赏
网站推荐

微软爱写作(Aim Writing):人工智能帮你写作文!微软出品的免费英文写作/辅助/批改/评分工具

2022-6-19 18:54:16

网站推荐

Skyline Webcams:全球高清实况摄像头,实时查看世界各地景物。

2022-7-27 12:50:56

软糖工作室微信公众号
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索