Transformer Variant Group

Enables shorthand syntax for grouping utilities with common prefixes.

Installation

import { defineConfig, transformerVariantGroup } from 'unocss'

export default defineConfig({
  transformers: [
    transformerVariantGroup(),
  ],
})

Usage

Group multiple utilities under one variant prefix using parentheses:

<!-- Before transformation -->
<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />

<!-- After transformation -->
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />

Examples

Hover States

<button class="hover:(bg-blue-600 text-white scale-105)">
  Hover me
</button>

Expands to: hover:bg-blue-600 hover:text-white hover:scale-105

Dark Mode

<div class="dark:(bg-gray-800 text-white)">
  Dark content
</div>

Expands to: dark:bg-gray-800 dark:text-white

Responsive

<div class="md:(flex items-center gap-4)">
  Responsive flex
</div>

Expands to: md:flex md:items-center md:gap-4

Nested Groups

<div class="lg:hover:(bg-blue-500 text-white)">
  Large screen hover
</div>

Expands to: lg:hover:bg-blue-500 lg:hover:text-white

Multiple Prefixes

<div class="text-(sm gray-600) font-(medium mono)">
  Styled text
</div>

Expands to: text-sm text-gray-600 font-medium font-mono

Key Points

• Use parentheses () to group utilities
• The prefix applies to all utilities inside the group
• Can be combined with any variant (hover, dark, responsive, etc.)
• Nesting is supported
• Works in class attributes and other extraction sources

<!-- Source references:

• https://unocss.dev/transformers/variant-group

-->