Windi CSS - 技术栈

让我用一句话解释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>

好看在哪？

核心心法：记住这个公式就够了

好了，重头戏来了。

Windi CSS的类名看起来乱七八糟，但实际上90%的类名都遵循一个公式：

$前缀:$ 属性-方向-大小/颜色

来，跟我读一遍口诀：

布局先看 display，大小间距 p/m 跟。

flex/grid 定方向，颜色 shadow 定颜值。

冒号前缀是魔法，响应状态全靠它。

想不起来用方扩，任意数值随便加。

Windi CSS 的颜色不是乱起的，它有自己的一套逻辑。以 blue-500 为例：

颜色名：blue、red、gray、slate、emerald......

数字 50-950：数字越小越浅，越大越深

用的时候不用纠结，

bg-gray-100 试一下，bg-gray-200 试一下，哪个好看用哪个。这就是原子类的快乐。

什么？预设的数值不够你用？没关系，Windi CSS 允许你使用"任意值"语法：

css 复制代码

<div class="w-[200px]">...</div> <div class="bg-[#ffddcc]">...</div> <div

方括号一包，想写什么写什么。这就是口诀里说的"想不起来用方扩"。

如果赶紧行内class过于长，可使用@apply将行内提取到自定义的class

css 复制代码

.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

Windi CSS Intellisense 是官方出品的智能提示插件，江湖人称"写 Windi CSS 必备"。