-
tailwind中的转换和动画
缩放scale-[num] scale-x-[num] scale-y-[num] num为一个可以为小数的数字 为1表示无缩放效果旋转rotate-[angle] angle为一个包含单位deg的角度值 rotate-[25deg]位移translate-x-[*] translate-y-[*]翻转skew-x-[angle] skew-y-[angle]转换中心自定义： origin-[x_y] x，y表示原点的坐标，可以为带单位的长度值，也可以是百分数 origin-[keyword] ：设置转换时的相对中心，默认为元素的中心 ...
2023-12-11 -
tailwind中的文本和列表
字体名称： font-[family]字体大小： text-[size]字体平滑antialiased ：灰度抗锯齿 subpixel-antialiased ：子像素抗锯齿斜体： italic not-italic字体粗细：font-[weight] ：weight为一个1-1000的数字 以下预设值从前到后依次加粗(由100增至900) font-thin font-extralight font-light font-normal font-medium font-semibold font-bold fon...
2023-12-08 -
tailwind中的背景和边框
背景滚动bg-fixed ： 相对视口固定，不会随着任何滚动而滚动 bg-local ： 会随着任何滚动而滚动 bg-scroll ：不会随着元素滚动而滚动，但是会随着整个页面的滚动而滚动背景裁切bg-clip-border bg-clip-padding bg-clip-content bg-clip-text背景颜色bg-transparent ：背景透明 bg-[*] :星号可以是任意CSS支持的颜色字符串，如 bg-[rgb(200,200,200)] bg-[rgba(200,200,200,0.6)] bg-[#fce5df] bg-...
2023-12-08 -
tailwind中的盒子模型
盒子类型block display: block; inline-block display: inline-block; inline display: inline; flex display: flex; inline-flex display: inline-flex; flow-root display: flow-root; grid display: grid; inline-grid display: inline-grid; contents ...
2023-12-07 -
tailwind中的修饰符
tailwind中的修饰符修饰符就是描述元素的某个状态时的样式，可以链式使用<p class="hover:scale-150">鼠标放上去变大</p> <input class="focus:hover:scale-150" value="获得焦点且鼠标放上去会变大" >伪元素伪元素的修饰符均改为名称后面加一个冒号的形式::before() before:content-['内容'] ：设置content的内容，不设置默认为空字符串 before:cla...
2023-12-07