国外最流行的UI组件库竟然长这个样子！！！

大家好,我是前端实验室的大师兄！

相信大家对于前端组件库都不陌生，大师兄也给大家介绍了许多有名的组件库，像ElementUI、antdev、nutUI等等

不知道大家有没有发现，国内的大多组件库都是互相抄袭借鉴，所以样式都大差不差。都说外国的月亮比较圆，大师兄这一段时间也赏了不少外国的“月亮”

今天就给大家介绍一款极为流行的 UI 组件库，到底“圆”不“圆”，大家说了算

daisyUI

daisyUI的作者是Pouya Saadeghi ，也是大名鼎鼎的 TailwindCSS 框架构建者

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

特点

• 提供 45 个常用组件，多达 29 款主题，款款都是精品
• 相比 Tailwind CSS 的原子类，daisyUI 采用语义化的 class 名，写出更纯净的 HTML
• 支持深度自定义、可定制主题
• 是一个纯净 CSS 组件，所以支持和任意Vue /React 这样的框架一起使用

主题风格

亮色

黑暗风

night

多种主题风格可以选择，支持在线一键预览

组件

radio

button按钮

Swap开关

警告

安装使用

使用之前需要安装 Node.js 和 Taiwind CSS。安装 daisyUI:

npm i daisyui

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

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

daisyUI官网：https://daisyui.com/

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。