fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

daisyUI
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://daisyui.com/
GitHub:https://github.com/saadeghi/daisyui
网站描述:Tailwind CSS的最受欢迎的组件库

Tailwind css 是一个实用且高度可定制的 CSS 框架。它让开发者通过简单地添加类名来轻松创建任何样式,无需编写自定义 CSS。与其他 CSS 框架相比,Tailwindcss 更加注重可定制性,因此可以更好地满足特定项目的需要。

安装 daisyUI:

npm i -D daisyui@latest

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

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

一旦你安装完成 daisyUI, 你可以通过btn, card等等来使用组件类。

1、不用再像这样通过 Tailwind 原生工具类来制作一个按钮:

<button
class="inline-block cursor-pointer rounded-md bg-gray-800 px-4 py-3 text-center text-sm font-semibold uppercase text-white transition duration-200 ease-in-out hover:bg-gray-900">
Button
</button>

2、你可以直接使用组件类来这样做:

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

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

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

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

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


链接: https://fly63.com/nav/4026

more>>
相关栏目
Materialize
基于Material Design的现代响应式前端框架
官网GitHub
Element UI
一套基于 Vue 2.0 的桌面端组件库
官网GitHub
Material Design(MDB)
领先的Bootstrap UI套件之一
点击进入
Muse-UI
基于 Vue2.0 的 Material Design UI 库
官网GitHub
sb-admin
基于Bootstrap简约美观的后台管理模板
官网GitHub
Vue-Access-Control
Vue权限管理解决方案
官网GitHub
RmlUI
桌面端GUI开发框架
官网GitHub
kitty-ui
基于 Vue + Element 实现的权限管理系统
点击进入GitHub
vue-multiselect
Vue.js 打造的下拉组件
官网GitHub
Structor
先进的React GUI编辑器
点击进入GitHub
lulu ui
基于jQuery,针对PC网站,兼容IE7+的前端UI框架
官网GitHub
Ant Design
是一个致力于提升『用户』和『设计者』使用体验的中台设计语言
官网GitHub
vue-design-system
一个用于基于 Vue.js 构建 UI 设计系统的开源工具
官网GitHub
Tauri
使用Web前端构建更小,更快,更安全的桌面应用
官网GitHub
Element Plus
基于 Vue 3,面向设计师和开发者的组件库
官网GitHub
vue-blu
基于Vuejs和Bulma开发的开源UI组件库
官网GitHub

手机预览