TailwindCss 总结

目录

一、简介

二、盒子模型相关

三、将样式类写到一个类里面@apply

[四、一款TailWind CSS的UI库](#四、一款TailWind CSS的UI库)


一、简介

官方文档:Width - TailwindCSS中文文档 | TailwindCSS中文网

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

他快速、灵活、可靠,没有运行时负担。

简单的讲就是,我们可以通过直接编辑class里的类名来直接实现想要的效果。

二、盒子模型相关

1、w-xx宽度 h-xx高度 bg-xx背景 min/max-w/h-;

2、p-xx表示padding m-xx表示margin;

3、border-xx表示border xx是长度或颜色 rou;

4、位置 absolute top-xx left-xx z

需要时可以直接在官方进行查询。

自定义像素写法,如:w-[101px]

比如我们给一个元素设置对应的class:

html 复制代码
<div class="w-[101px] h-80 bg-red-200">
    Hello TailwindCss
</div>

页面已经有对应的CSS效果了:

三、将样式类写到一个类里面@apply

对于二中的案例,我们可以在CSS中将这些样式写在一个类里,以便反复调用。

css 复制代码
    .divBox{
            @apply w-[101px] h-80 bg-red-200;
        }
html 复制代码
<div class="divBox">
    Hello TailwindCss
</div>

这样也可以实现该效果。

参考官方文档:Functions & Directives - TailwindCSS中文文档 | TailwindCSS中文网

另外,WindCSS支持Less、SCSS这些一起使用。

四、一款TailWind CSS的UI库

链接:

shadcn/ui

总结到此,后续补充!

相关推荐
叫兽~~7 分钟前
uniapp 使用vue3写法,拿不到uni-popup的ref
前端·uni-app
nyf_unknown7 分钟前
(vue)给循环遍历的el-select选择框加全选/清空/反选,禁选,添加行移除行功能
前端·javascript·vue.js
一颗不甘坠落的流星31 分钟前
【React】刷新页面或跳转路由时进行二次确认
前端·javascript·react.js
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】批注、选择窗格
前端·笔记·学习·编辑器·pptist
放飞自我的Coder1 小时前
【python/html 鼠标点选/框选图片内容】
css·python·html
一水鉴天1 小时前
智能工厂的设计软件 应用场景的一个例子: 为AI聊天工具添加一个知识系统 之24 重审 前端实现:主页页面
前端
东方小月2 小时前
NestJS中如何优雅的实现接口日志记录
前端·后端·nestjs
丢失的林夕2 小时前
axios的替代方案onion-middleware
前端·vue.js·ajax·typescript·reactjs
JINGWHALE12 小时前
设计模式 行为型 策略模式(Strategy Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·策略模式
北京_宏哥3 小时前
《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)
java·selenium·前端框架