---
name: transformer-variant-group
description: Shorthand for grouping utilities with common prefixes
---

# Transformer Variant Group

Enables shorthand syntax for grouping utilities with common prefixes.

## Installation

```ts
import { defineConfig, transformerVariantGroup } from 'unocss'

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

## Usage

Group multiple utilities under one variant prefix using parentheses:

```html
<!-- 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

```html
<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

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

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

### Responsive

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

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

### Nested Groups

```html
<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

```html
<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
-->