自动值推导

Windi CSS 只会生成你使用的 CSS 工具类,它允许你在样式类中编写任意值,同时会根据适当的语义生成相应的样式。

<!-- 尺寸和定位 -->
<div class="p-5px mt-[0.3px]"></div>

<!-- 颜色 -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[#b2a8bb]"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- grid template -->
<div class="grid-cols-[auto,1fr,30px]"></div>

当你想有意忽略你的设计系统,并且对特定的组件有一定的粒度控制时,这是非常有用的。直接的 p-5px 和 显示转义的 p-[5px] 都是被支持的。

我们提供了一个 可视化分析器,可以让你对你项目中所有工具类的使用情况有一个概览,轻松标记出你设计系统中不符合预期的值转义。

数字

p-{float} -> padding: {float/4}rem;
CSS

尺寸

// {size} 应当以 rem|em|px|vh|vw|ch|ex 结尾
p-{size} -> padding: {size};
CSS

分数

w-{fraction} -> width: {fraction -> percent};
CSS

颜色

text-{color} -> color: rgba(...);

border-hex-{hex} -> border-color: rgba(...);
CSS

变量

你甚至可以传递变量名称,在与 css 变量结合时非常有用。

bg-${variableName}
CSS

Grid Templates

grid-cols-[auto,1fr,30px]
CSS