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

Language	Base	Modifiers
Vue / Blade	class="…"	class:hover="…", class:sm:hover="…"
React	className="…"	className:hover="…" (also accepts class:…); JSX expressions allowed
Svelte	class="…"	Quoted only: class:hover="…"

Modifier names may contain letters, numbers, _, -, :, / (named groups such as group-hover/item), and @ (container queries such as @md). Arbitrary variants ([&>*], data-[state=open]) cannot be attribute names — leave those tokens on the base class. In React JSX, / in an attribute name is invalid, so named groups must stay on className.

• Vue / Blade / Svelte / HTML: modifier values must be double-quoted static class strings.
• React: prefer double-quoted static strings. 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.