快速入门windicss框架常用类名配置

Windi CSS 是一个工具优先的 CSS 框架，它的设计思想与 Tailwind CSS类似，通过提供一系列预设的实用类名来帮助开发者快速编写符合语义化的 HTML 样式。以下是一些 Windi CSS 中常用的类名规则：

布局尺寸：

• 宽度：

  • .w-{size} 设置元素宽度为指定大小，如 .w-4 表示宽度为 4 个单位（可能是 rem 或其他根据配置的单位）。

• 高度：

  • .h-{size} 设置元素高度为指定大小，如 .h-16 表示高度为 16 个单位。

边距和填充：

• 外边距（Margin）：

  • .m-{size} 设置所有方向的外边距为指定大小。
  • .mx-{size} 设置水平方向（左右）外边距为指定大小。
  • .my-{size} 设置垂直方向（上下）外边距为指定大小。
  • .mt-{size} 设置顶部外边距。
  • .mr-{size} 设置右侧外边距。
  • .mb-{size} 设置底部外边距。
  • .ml-{size} 设置左侧外边距。

• 内边距（Padding）：

  • .p-{size} 设置所有方向的内边距为指定大小。
  • .px-{size} 设置水平方向（左右）内边距为指定大小。
  • .py-{size} 设置垂直方向（上下）内边距为指定大小。
  • .pt-{size} 设置顶部内边距。
  • .pr-{size} 设置右侧内边距。
  • .pb-{size} 设置底部内边距。
  • .pl-{size} 设置左侧内边距。

除此之外，Windi CSS 还提供了大量的实用类名来控制颜色、字体、背景、文本样式、定位、Flexbox 和 Grid布局等，例如：

• 颜色：.text-{color} 控制文本颜色，.bg-{color} 设置背景颜色。
• 显示和隐藏：.hidden, .block, .inline-block 等控制元素的显示方式。
• 字体大小：.text-{size} 设置文本大小。
• 对齐：.flex, .items-center, .justify-between 等 Flexbox 相关属性。
• 响应式：通过添加断点前缀（如 sm:、md:、lg: 等）实现不同屏幕尺寸下的适配。

具体类名及其对应的效果可以根据实际使用的 Windi CSS 版本以及配置文件中的预设进行调整。如果需要最新的或更详细的类名列表，请查阅 Windi CSS 的官方文档。