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：

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

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

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

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

    .divBox{
            @apply w-[101px] h-80 bg-red-200;
        }

<div class="divBox">
    Hello TailwindCss
</div>

这样也可以实现该效果。

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

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

四、一款TailWind CSS的UI库

链接：

shadcn/ui

总结到此，后续补充！