useclassy

Authoring with UseClassy

Use UseClassy to separate Tailwind variants from base utilities:

<!-- Before -->
<button class="rounded px-4 hover:bg-blue-500 hover:text-white focus:ring-2">

<!-- After -->
<button
  class="rounded px-4"
  class:hover="bg-blue-500 text-white"
  class:focus="ring-2"
>

Syntax

Modifier names may contain letters, numbers, _, -, :, / (named groups such as group-hover/item), @ (container queries such as @md), and arbitrary variants with […] ([&>*], data-[state=open]). UseClassy parses modifier names with bracket depth so = inside […] is not the attribute separator. React uses the same modifier attributes as Vue; UseClassy rewrites them before JSX/HTML parse.

• Vue / Blade / Svelte / HTML: modifier values must be quoted static class strings (" or ').
• React: prefer quoted static strings (" or '). JSX expressions are also supported when string literals inside the expression should receive the variant prefix, e.g. className:hover={on ? 'bg-blue-500' : 'bg-gray-200'}.

Refactor existing code

When asked to convert markup to UseClassy:

1. Identify the framework from the file/config; use className: for React and class: elsewhere.
2. Inspect each static class / className string.
3. Keep unprefixed utilities in the base attribute.
4. Group utilities that share the same modifier prefix and remove that prefix:
   • hover:bg-blue-500 hover:text-white → class:hover="bg-blue-500 text-white"
   • focus:ring-2 focus:ring-blue-400 → class:focus="ring-2 ring-blue-400"
   • md:px-6 md:py-3 → class:md="px-6 py-3"
   • sm:hover:underline → class:sm:hover="underline"
5. Preserve utility order within each group and preserve unrelated attributes/expressions.