Windicss 提供了非常丰富的类名来快速实现样式,以下是一些常用的类名:
- 宽度和高度
.w-{size}
: 宽度为{size}
,例如.w-4
表示宽度为 4rem。.h-{size}
: 高度为{size}
,例如.h-16
表示高度为 4rem。
- 外边距和内边距
.m-{size}
: 外边距为{size}
,例如.m-4
表示外边距为 1rem。.p-{size}
: 内边距为{size}
,例如.p-4
表示内边距为 1rem。.mx-{size}
: 水平方向的外边距为{size}
,例如.mx-4
表示左右外边距为 1rem。.my-{size}
: 垂直方向的外边距为{size}
,例如.my-4
表示上下外边距为 1rem。
- 字体大小和颜色
.text-{size}
: 字体大小为{size}
,例如.text-lg
表示字体大小为大号。.text-{color}
: 字体颜色为{color}
,例如.text-red-500
表示字体颜色为红色 500。.bg-{color}
: 背景颜色为{color}
,例如.bg-gray-200
表示背景颜色为灰色 200。
- 定位和布局
.absolute
: 绝对定位。.relative
: 相对定位。.fixed
: 固定定位。.flex
: 弹性布局。.grid
: 网格布局。.justify-{content}
: 主轴对齐方式,例如.justify-center
表示主轴居中对齐。.items-{align}
: 交叉轴对齐方式,例如.items-center
表示交叉轴居中对齐。.gap-{size}
: 网格间距,例如.gap-4
表示网格间距为 1rem。
以上仅是一部分常用的类名,Windicss 还提供了非常丰富的类名来实现样式,具体可以参考官方文档。