Windi CSS 值自動推斷

由于 Windi CSS 只會生成您使用的 CSS 實用程序，它使您能夠在類中使用任意值并根據(jù)適當(dāng)?shù)恼Z義生成相應(yīng)的樣式。

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

當(dāng)您想退出設(shè)計系統(tǒng)并對某些特定組件進行細(xì)粒度控制時，這很有用。支持直接 ?p-5px? 和顯式轉(zhuǎn)義 ?p-[5px]?。

我們還提供了一個可視化分析器，讓您了解項目中所有實用程序的使用情況，并輕松發(fā)現(xiàn)設(shè)計系統(tǒng)中不需要的值逃逸。

數(shù)字

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;
}

分?jǐn)?shù)

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 變量結(jié)合時非常有用。

bg-${variableName}

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

網(wǎng)格模板

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

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