windicss常用类名规则

Windicss 提供了非常丰富的类名来快速实现样式，以下是一些常用的类名：

1. 宽度和高度

• .w-{size}: 宽度为 {size}，例如 .w-4 表示宽度为 4rem。
• .h-{size}: 高度为 {size}，例如 .h-16 表示高度为 4rem。

1. 外边距和内边距

• .m-{size}: 外边距为 {size}，例如 .m-4 表示外边距为 1rem。
• .p-{size}: 内边距为 {size}，例如 .p-4 表示内边距为 1rem。
• .mx-{size}: 水平方向的外边距为 {size}，例如 .mx-4 表示左右外边距为 1rem。
• .my-{size}: 垂直方向的外边距为 {size}，例如 .my-4 表示上下外边距为 1rem。

1. 字体大小和颜色

• .text-{size}: 字体大小为 {size}，例如 .text-lg 表示字体大小为大号。
• .text-{color}: 字体颜色为 {color}，例如 .text-red-500 表示字体颜色为红色 500。
• .bg-{color}: 背景颜色为 {color}，例如 .bg-gray-200 表示背景颜色为灰色 200。

1. 定位和布局

• .absolute: 绝对定位。
• .relative: 相对定位。
• .fixed: 固定定位。
• .flex: 弹性布局。
• .grid: 网格布局。
• .justify-{content}: 主轴对齐方式，例如 .justify-center 表示主轴居中对齐。
• .items-{align}: 交叉轴对齐方式，例如 .items-center 表示交叉轴居中对齐。
• .gap-{size}: 网格间距，例如 .gap-4 表示网格间距为 1rem。

以上仅是一部分常用的类名，Windicss 还提供了非常丰富的类名来实现样式，具体可以参考官方文档。