Logo Windi CSS

自动值推导

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