wap网站 html5,微官网和公众号的区别,公司网站建设开源平台,宝华路桥建设集团网站目录
一、简介
二、盒子模型相关
三、将样式类写到一个类里面apply
四、一款TailWind CSS的UI库 一、简介
官方文档#xff1a;Width - TailwindCSS中文文档 | TailwindCSS中文网
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类…目录
一、简介
二、盒子模型相关
三、将样式类写到一个类里面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 classw-[101px] h-80 bg-red-200Hello TailwindCss
/div
页面已经有对应的CSS效果了 三、将样式类写到一个类里面apply
对于二中的案例我们可以在CSS中将这些样式写在一个类里以便反复调用。 .divBox{apply w-[101px] h-80 bg-red-200;}
div classdivBoxHello TailwindCss
/div
这样也可以实现该效果。
参考官方文档Functions Directives - TailwindCSS中文文档 | TailwindCSS中文网
另外WindCSS支持Less、SCSS这些一起使用。
四、一款TailWind CSS的UI库
链接
shadcn/ui
总结到此后续补充
