tailwindcss常用类名 拿来就用

定位

fixed sticky relative absolute
left-0 
z-10

布局

flex flex-col block
items-center justify-center
shrink-0
overflow-x-auto overflow-hidden overflow-y-scroll

宽高 / 边距 / 边框

w-4 w-screen w-full h-auto h-[22px] h-[80vh] max-h-[22px]
p-1 px-1 mx-auto
rounded rounded-sm rounded-xl rounded-md rounded-lg rounded-full
border-b border-b-zinc-200
outline-none
shadow-2xl
cursor-pointer

文本

text-lg text-xl text-base
text-zinc-800
text-center
font-medium font-bold font-semibold
space-y-4
tracking-wide

颜色

bg-red-900 bg-red-900/80 bg-white
opacity-0

变换 / 动画

translate-y-[-50%]
scale-105
animate-spin
duration-200

前缀

// 媒体查询 srceen > 某值时生效（PC 端）
md:
// 最后一个元素
last:mr-4
// 点击状态下
active:bg-zinc-100
hover:bg-red-100/40
focus:border-red-300
// 鼠标移入 group 上级元素时，后代元素也能触发 hover 样式效果
group(上级) group-hover:bg-white(后代)