windi css

/* Windi CSS 示例代码 */

/* 1. 基本样式 */
.text-xl {
  font-size: 1.25rem; /* 设置字体大小为1.25rem */
}

.m-4 {
  margin: 1rem; /* 设置外边距为1rem */
}

.p-6 {
  padding: 1.5rem; /* 设置内边距为1.5rem */
}

/* 2. 颜色和背景 */
.bg-blue-500 {
  background-color: #3b82f6; /* 设置背景颜色为蓝色 */
}

.text-white {
  color: #ffffff; /* 设置文本颜色为白色 */
}

/* 3. 布局 */
.flex {
  display: flex; /* 使用弹性布局 */
}

.justify-center {
  justify-content: center; /* 水平居中对齐 */
}

.items-center {
  align-items: center; /* 垂直居中对齐 */
}

/* 4. 响应式设计 */
.sm:text-lg {
  @media (min-width: 640px) {
    font-size: 1.125rem; /* 在小屏幕设备上设置字体大小为1.125rem */
  }
}

.md:w-1/2 {
  @media (min-width: 768px) {
    width: 50%; /* 在中等屏幕设备上设置宽度为50% */
  }
}

解释说明：

Windi CSS 是一个基于 Tailwind CSS 的按需生成的实用工具优先的 CSS 框架。它通过分析你的 HTML 文件，只生成你实际使用的类名对应的 CSS 样式，从而减少最终打包的 CSS 文件大小。

• 基本样式：text-xl, m-4, p-6 等类名用于快速设置字体大小、外边距和内边距。
• 颜色和背景：bg-blue-500, text-white 等类名用于设置背景颜色和文本颜色。
• 布局：flex, justify-center, items-center 等类名用于创建灵活的布局，并实现水平和垂直居中对齐。
• 响应式设计：sm:text-lg, md:w-1/2 等类名用于根据不同的屏幕尺寸应用不同的样式。