由于 Windi CSS 只会生成您使用的 CSS 实用程序，它使您能够在类中使用任意值并根据适当的语义生成相应的样式。

<!-- sizes and positions -->
<div class="p-5px mt-[0.3px]"></div>

<!-- colors -->
<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;

.p-2\.5 {
  padding: 0.625rem;
}
.p-3\.2 {
  padding: 0.8rem;
}

尺寸

// {size} should be end with rem|em|px|vh|vw|ch|ex
p-{size} -> padding: {size};

.p-3px {
  padding: 3px;
}
.p-4rem {
  padding: 4rem;
}

分数

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

.w-9\/12 {
  width: 75%;
}

颜色

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

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

.border-hex-6dd1c7 {
  --tw-border-opacity: 1;
  border-color: rgba(109, 209, 199, var(--tw-border-opacity));
}
.text-cyan-400 {
  --tw-text-opacity: 1;
  color: rgba(34, 211, 238, var(--tw-text-opacity));
}

变量

你甚至可以传递变量名，这在与 CSS 变量结合时非常有用。

bg-${variableName}

.bg-\$test-variable {
  background-color: var(--test-variable);
}

网格模板

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

.grid-cols-\[auto\2c 1fr\2c 30px\] {
  grid-template-columns: auto 1fr 30px;
}