Value Auto-infer #

Since Windi CSS will only generate the CSS utilities you use, it enables you to use arbitrary values in your classes and generate corresponding styles based on the appropriate semantics.

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

This is useful when you want to opt-out of your design system and have some fine-grain controls over some specific components. Both direct p-5px and explicitly escaping p-[5px] are supported.

We also provided an visual analyser to give you an overview of all the utility usages in your project and to spot unwanted value escaping of your design system with ease.

Numbers #

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

Sizes #

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

Fractions #

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

Colors #

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

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

Variables #

You can even pass variable names, which is very useful in combination with CSS variables.

bg-${variableName}

Grid Templates #

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