经典常用配置

大小

本类

背景

边框轮廓

Typography

标准文本处理

三大字体家族
font-sans font-serif font-mono

意大利体
italic
not-italic

字体磅值
font-thin
font-light
font-normal
font-bold
font-extrabold
font-black

字符变体不同变体呈现不同字符状态
ordinal
slashed-zero
oldstyle-nums

letterspacing
tracking-tight
tracking-normal
tracking-wide

强制字符串分成几行来显示
line-clamp-3
line-clamp-none

lineheight
leading-4

列表处理

li 标签前面显示序号样式数字、黑点、无样式
list-decimal
list-disc
list-none

文本

文本位置
text-center

文本颜色(斜杠后的数字表示透明度透明度 0-100)
text-transparent
text-inherit
text-slate-50
text-blue-600/25

文本装饰
underline
overline
line-through
文本装饰对应的颜色
decoration-blue

文本装饰样式
decoration-solid
decoration-double
decoration-dotted
decoration-dashed
decoration-wavy

text overflow
truncate
text-ellipsis
text-clip

text-indent
indent-0

vertical-align
align-middle

背景 Background

三大 attachment
bg-fixed
bg-local
bg-scroll

clip使用 clip-text 打造渐变文本!)
bg-clip-content
bg-clip-text

position背景图聚焦位置
bg-bottom
bg-top

backgroundrepeat
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space

backgroundsize
bg-auto
bg-cover
bg-contain

背景渐变色
如下代码表示:渐变色从左到右(to-r),左颜色为 cyan-500,右颜色为 blue-500
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>

Border

ring 一种浅色投影效果
ring-0
ring-white
ring-offset-0

Effects

boxshadow
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-none

透明
opacity-0

过滤器 Filters

模糊 blur-0

快速阴影 drop-shadow-xl

变成黑白 grayscale

反色 invert

饱和度 saturate-50

背景模糊(常用!) backdrop-blur-sm

过渡动画 Transition

全部过渡 transition-all

过渡时长(单位 msduration-1000

过渡曲线 ease-in-out

延后过渡单位 msdelay-1000

几个预制好的动画
animate-spin 加载动画
animate-ping消息圆点跳动
animate-pulse 骨架加载脉冲
animate-bounce 弹跳

大小设置 sizing

宽度 w-0
按比例划分宽度 w-1/2

最小宽度
min-w-min
min-w-max
min-w-full

最大宽度
max-w-sm
max-w-lg

高度设置只需要把 w 改成 h 即可,剩余属性设置一致

间距 spacing

padding
p-0
px-0 x 表示左右
py-0 y 表示上下
px-px 表示左右间隔 1px

margin
-mt-8 距顶-8rem

用于设置 space-between 间距样式
space-x-0
space-y-0

弹性布局 Flexing&amp;Grid

Flex 常用设置
flex
flex-col
flex-row
flex-wrap flex-nowrap
justify-center
items-center
grow-0
shrink-0

Grid 常用设置
grid-cols-4

其他
gap-x-px 左右间距 1px
content-center 设置 aligncenter 居中

布局 layout

容器 container
布局 colums-2

怪异盒模型 box-border
标准盒模型 box-content

剩下的就是一些 display float clear overflow position 这些,都是直接单词拿来就用,这里不做介绍

原文地址:https://blog.csdn.net/delete_you/article/details/129965712

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_39308.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注