-
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 -
CSS伪类中的content
在伪类中的content属性可能的值attr(X) 将 X 属性值以字符串形式返回。如果没有则返回一个空字符串 string 文本内容 open-quote 左引号 close-quote 右引号 no-open-quote no-close-quote 不会生产任何内容，但是会改变（增加或降低）引号层级。 url 指定一个外部资源（比如图片） initial 它将属性设置为其默认值 inherit 继承自其父元素 none 不设置伪元素::before或::after的...
2023-12-06 -
tailwindcss介绍及安装
在前端开发中，我们经常用到现成的ui框架，如Bootstrap，如果要创建一个按钮，只需要将class设置为btn即可，极大的提高了我们的开发效率但是这也限制了定制化，使用这些框架的前端界面相似度极高另外就是从css代码来讲，由于定义的类中属性较多，颗粒度较大，如在btn类中设置了圆角，同时也在其他类中设置圆角，那么这些设置圆角的代码就是重复代码，如果把设置圆角的代码独立出来定义一个类名，就可以降低css代码量，提高代码的重用Taiwind CSS就是这样一款开源的 CSS 样式库，它将开发过程中会用到的几乎全部的css样式以一种极小的颗粒度定义成一套固定的css类名称，由于颗粒度极小，...
2023-09-13