Tailwind CSS是一个以功能类为主的CSS框架。你可以通过原子类的类名快速构建一个网站,比如 .flex、.pt-4、.text-center、.rotate-90,就可以用HTML代码完成开发,不用自己想各种CSS名字。下面web建站小编给大家简单介绍一下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, Tailwind CSS 组件库
上面是“daisyUI如何快速搭建使用”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_12797.html
workflows工作流
- 图生图生成动漫效果ComfyUI工作流
- 一个黄色的海绵宝宝ComfyUI工作流
- 一个戴着破旧莎草帽的机械忍者
- 《翅膀之王:鸡的团契》海报ComfyUI工作流
- 一只透明老虎骨骼标本ComfyUI工作流
- 3d卡通风格多彩头发的女人
- 迷人的月光,发光的花朵
- 水中一台精致而破旧的老式电视鱼缸ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!