三大字体家族
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
letter-spacing
tracking-tight
tracking-normal
tracking-wide
强制字符串分成几行来显示
line-clamp-3
line-clamp-none
line-height
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
三大 attachment
bg-fixed
bg-local
bg-scroll
clip(使用 clip-text 打造渐变文本!)
bg-clip-content
bg-clip-text
position(背景图聚焦位置)
bg-bottom
bg-top
background-repeat
bg-repeat
bg-no-repeat
bg-repeat-x
bg-repeat-y
bg-repeat-round
bg-repeat-space
background-size
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>
ring 一种浅色投影效果
ring-0
ring-white
ring-offset-0
box-shadow
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-none
透明度
opacity-0
模糊 blur-0
快速阴影 drop-shadow-xl
变成黑白 grayscale
反色 invert
饱和度 saturate-50
背景模糊(常用!) backdrop-blur-sm
全部过渡 transition-all
过渡时长(单位 ms) duration-1000
过渡曲线 ease-in-out
延后过渡(单位 ms) delay-1000
几个预制好的动画
animate-spin
加载环动画
animate-ping
新消息圆点跳动
animate-pulse
骨架屏加载脉冲
animate-bounce
弹跳
宽度 w-0
按比例划分宽度 w-1/2
最小宽度
min-w-min
min-w-max
min-w-full
最大宽度
max-w-sm
max-w-lg
高度设置只需要把 w 改成 h 即可,剩余属性设置一致
padding
p-0
px-0
x 表示左右
py-0
y 表示上下
px-px
表示左右间隔 1px
margin
-mt-8
距顶-8rem
专用于设置 space-between 间距的样式
space-x-0
space-y-0
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
设置 align-center 居中
容器 container
列布局 colums-2
怪异盒模型 box-border
标准盒模型 box-content
剩下的就是一些 display float clear overflow position 这些,都是直接原单词拿来就用,这里不做介绍