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

总结到此,后续补充!

相关推荐
汪子熙6 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到117 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆11 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er16 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0619 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444022 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆23 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子26 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain933 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人43 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa