一、tailwindcss常用类名

1.尺寸

w / h
w-px => width:1px
w-8 => width: 2rem
w-1/2 => 50%

2.边距

(1)内外边距

m/p
m-8 => margin: 2rem
mx-8 => margin: 0 2rem
my-8 => margin: 2rem 0
mr-8 => margin-right:2rem
ml-8 => margin-left: 2rem
mt-8 => margin-top:2rem
mb-8 => margin-bottom:2rem

3.字体样式

1.大小

text-base => font-size: 1rem; line-height: 1.5rem
text-lg =>font-size: 1.125rem; line-height: 1.75rem
text-xl =>font-size: 1.25rem; line-height: 1.75rem;

2.字体粗细

font-normal => font-weight : normal
font-semibold => font-weight:600
font-bold => font-weight:700

3.字体颜色

text-red-300

4.字体对齐

text-left
text-right
text-center

5.行高

leading-4 => line-height: 1rem

4.边框

1.圆角

rounded-lg => border-raidus: 0.5rem
rounded-xl => border-raidus: 0.75rem
rounded-2xl => border-raidus: 1rem

2.分割线

divide-x
分割线颜色 divide-red

5.阴影

shadow-lg
shadow-xl

5.flex

1.flex direction:

flex-row
flex-col

2.justify content

justify-start
justify-end
justify-around

3.align-items

align-start
align-end
align-center