More

WindiCSS features

Updated on

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>

Discover further #