A couple of features that I like from WindiCSS.
Variant Groups #
Variants in utility classes are often used multiple times each time, being able to group them together, plus syntax highlighting reduces the time to understand what styles being applied.
<!-- without variant groups -->
<button class="bg-black text-white hover:bg-white hover:rounded hover:text-black">
Next Step ->
</button>
<!-- with variant groups -->
<button class="bg-black text-white hover:bg-white hover:rounded hover:text-black">Next Step -></button>
Value Auto-infer #
Value auto-info is useful when in need of one-time-use styles. In WindiCSS it's both supported with or without the [], but personally I think it's much cleaner without it.
<section class="bg-$colors-bg mt-8rem mb-12px max-w-56ch text-hex-121212">
<Content />
</section>
Attributify Mode #
Attributify mode is the most interesting one, it enables us to write utility class in html attributes. This could be useful to separate utilities in different breakpoints.
<button
bg="dark-500 dark:light-500 hover:dark-400 dark:hover:light-400"
text="sm white dark:black"
font="normal light"
border="rounded-full 1 gray-500"
>
Click
</button>