让我用一句话解释Windi CSS 的核心哲学：
它不是给你一堆预设好的组件，而是给你一堆"原子类"，让你像搭积木一样自己拼。
传统的 CSS 是这样的：
css
.button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; }Windi CSS 是这样的：
css
<button class="bg-blue-500 text-white px-4 py-2 rounded"> 按钮 </button>好看在哪？
-
不用绞尽脑汁想类名
-
样式就在 HTML 里，一眼可见
-
改起来那叫一个快------直接改字符串就行
核心心法：记住这个公式就够了
好了，重头戏来了。
Windi CSS的类名看起来乱七八糟，但实际上90%的类名都遵循一个公式：
前缀:\]属性-方向-大小/颜色 * **前缀 (可选)** ：响应式断点 (如 `md:`, `lg:`) 或状态 (`hover:`, `focus:`)。 * **属性** ：要修改的内容，如 `bg` (背景), `text` (文字), `m` (外边距)。 * **方向 (可选)** ：位置，如 `t` (上), `b` (下), `l` (左), `r` (右), `x` (左右), `y` (上下)。 * **大小/颜色** ：具体的数值或颜色名称，如 `4`, `xs`, `blue-500`。 来，跟我读一遍口诀： **布局先看 display，大小间距 p/m 跟。** **flex/grid 定方向，颜色 shadow 定颜值。** **冒号前缀是魔法，响应状态全靠它。** **想不起来用方扩，任意数值随便加。** ## 常用类名速查 #### 布局与盒子 | 效果 | 类名 | 记忆口诀 | |---------|----------------|--------------| | Flex 容器 | flex | 就是 flex | | 垂直排列 | flex-col | flex + col | | 水平居中 | justify-center | justify = 主轴 | | 垂直居中 | items-center | items = 交叉轴 | #### 尺寸与间距 | 效果 | 类名 | 记忆口诀 | |----------|----------|-------------| | 宽度 100% | w-full | w = width | | 高度 100vh | h-screen | screen = 屏幕 | | 内边距 | p-4 | p = padding | | 外边距 | m-4 | m = margin | #### 文字与排版 | 效果 | 类名 | 记忆口诀 | |------|---------------|------------| | 字体大小 | text-lg | text + 大小 | | 字体粗细 | font-bold | font + 粗细名 | | 文字颜色 | text-gray-500 | text + 颜色 | | 文字居中 | text-center | text + 位置 | #### 背景与边框 | 效果 | 类名 | 记忆口诀 | |-----|-------------|-----------------| | 背景色 | bg-blue-500 | bg = background | | 圆角 | rounded-lg | rounded = 圆角 | | 边框 | border | 就是 border | | 阴影 | shadow-lg | shadow = 阴影 | #### 响应式与交互 | 效果 | 类名 | 记忆口诀 | |-------|--------------------|-----------| | 桌面端生效 | md:flex | md = 断点 | | 悬停效果 | hover:bg-blue-700 | hover: 开头 | | 聚焦效果 | focus:outline-none | focus: 开头 | | 暗黑模式 | dark:bg-black | dark: 开头 | ## 颜色怎么记？So Easy Windi CSS 的颜色不是乱起的，它有自己的一套逻辑。以 **blue-500** 为例： 颜色名：blue、red、gray、slate、emerald...... 数字 50-950：数字越小越浅，越大越深 用的时候不用纠结， **bg-gray-100** 试一下，**bg-gray-200** 试一下，哪个好看用哪个。**这就是原子类的快乐。** ## 进阶技巧：自定义值 什么？预设的数值不够你用？没关系，Windi CSS 允许你使用"任意值"语法： ```css