Tailwind CSS是一个以功能类为主的CSS框架。你可以通过原子类的类名快速构建一个网站,比如 .flex、.pt-4、.text-center、.rotate-90,就可以用HTML代码完成开发,不用自己想各种CSS名字。下面编程教程网小编给大家简单介绍一下daisyUI如何快速搭建使用!
安装 daisyUI
npm i daisyui
在tailwind.config.js文件里追加 daisyUI 的设置
module.exports = {
//...
plugins: [require("daisyui")],
}
示例:
<!-- 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>
在线引入 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>
进入daisyUI中文官网
以上是编程学习网小编为您介绍的“daisyUI如何快速搭建使用”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:daisyUI如何快速搭建使用
基础教程推荐
猜你喜欢
- 学习Bootstrap滚动监听 附调用方法 2024-01-17
- css水平居中的各种方法总结(推荐) 2023-12-21
- 与Vue2相比,Vue3有哪些性能提升? 2025-01-12
- vuejs本周的开始、结束日期(从周一~周日) 2024-12-08
- Webpack devServer中的 proxy 实现跨域的解决 2024-03-08
- 微信小程序单选框自定义赋值 2023-12-14
- 船长上线ERP,加码跨境电商SAAS软件赛道 2024-12-08
- js的window.showModalDialog及window.open用法实例分析 2023-12-15
- Photoshop CC给前端开发者怎样的体验?新特性介绍 2023-12-21
- CSS Float布局过程与老生常谈的三栏布局 2024-01-08
