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

Sizes

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

Fractions

w-{fraction} -> width: {fraction -> percent};
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
Windi CSS is Sunsetting We recommend new projects to consider alternatives. Click for more information.