Value Auto-infer

Since Windi CSS will only generate the CSS utilities you use, it enables the possibility to use arbitrary value in your classes and generate coresponding 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 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 utilities usages in your project and spot unwanted value escaping of your design system with ease.

Numbers

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

Sizes

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

Fractions

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

Colors

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

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

Variables

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

bg-${variableName}
CSS

Grid Templates

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