Tailwind语法基础

bg-{color}-{shade}
--colors:
black,white:-
gray,red,orange,yellow,green,teal,indigo,blue,purple,pink:100-900
+++
元素大小{w|h}
--size:
1-6,~+1
8,10,12~+2
16,20,24~+4
32,40,48,56,64~+8
1/2,1/3,4,5,6,12~占父元素的比例
Screen,full~充满屏幕
--元素大小
尺寸单位为rem
1rem相当于一个基本字的大小：基本字大小为16px,1rem=16px
同时：1rem=4
例：宽16px表示w-4
+++
Padding&Margin
{p|m}-{size}
{p|m}-{x|y}}-{size}  x为左右，y为上下
{p|m}-{l|r|t|b}}  lrtb-左右上下
+++
字体尺寸
text-{size}
xs=.75rem=12px
sm=.875rem=14px
base=1rem=16px
lg=1.125rem=18px
xl=1.25rem=20px
2xl=1.5rem=24px
3~6xl=1.875~4rem=30~64px
...
对齐方式
text-{align}
align=left,center,right,justify
...
字体颜色
text-{color}-{shades}
black,white:-
gray,red,orange,yellow,green,teal,indigo,blue,purple,pink:100-900
...
字体权重
font-{weight}
hairline=100
thin=200
light=300
normal=400
medium=500
semibold=600
bold=800
extrabold=800
black=900
...
字母间距
tracking-{spacing}
tighter=-0.05em
tight=-0.025em
normal=0
wide=0.025em
wider=0.05em
widest=0.1em
(em基于父元素字体大小，而不是文档）
...
行高
leading-{spacing}
none=1
tight=1.25
snug=1.375
normal=1.5
relaxed=1.625
loose=2
...
文本修饰
underline=下划线
no-underline=无下划线
line-through=删除线
...
文本转换
uppercase=字母大写
lowercase=字母小写
capitalize=首字母大写
normal-case=去除样式
+++
边框大小
border-{side}-{thickness}
side:t,b,l,r
thickness:
0=0px
[empty]=1px
2=2px
4=4px
8=8px
...
边框颜色
border-{color}-{shade}
black,white:-
gray,red,orange,yellow,green,teal,indigo,blue,purple,pink:100-900
...
边框样式
border-{style}
.border-sold 实线
.border-dashed 长虚线
.border-dotted 短虚线
.border-double 双线
.border-none 无边框
...
边框圆角
rounded-{radius}
radiuses=rems=pixels
sm=0.125rem=2px
[empty]=0.25rem=4px
lg=0.5rem=8px
full=-=9999px
none=0=0px
...
边框圆角方向
rounded{side}-{radius}
side=piex
t=top-left & top-right
r=top-right & bottom-right
b=bottom-left& bottom-right
l=top-left & bottom-left
tl=top-left
tr=top-right
br=bottom-right
bl=bottom-left

///0:05 2021/7/4
https://www.bilibili.com/video/BV1xV41147fj/?p=7&spm_id_from=pageDriver

爱情有点蓝