TailwindCss 总结
目录
一、简介
二、盒子模型相关
三、将样式类写到一个类里面@apply
四、一款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
总结到此，后续补充！