1---
2name: transformer-variant-group
3description: Shorthand for grouping utilities with common prefixes
4---
5 
6# Transformer Variant Group
7 
8Enables shorthand syntax for grouping utilities with common prefixes.
9 
10## Installation
11 
12```ts
13import { defineConfig, transformerVariantGroup } from 'unocss'
14 
15export default defineConfig({
16  transformers: [
17    transformerVariantGroup(),
18  ],
19})
20```
21 
22## Usage
23 
24Group multiple utilities under one variant prefix using parentheses:
25 
26```html
27<!-- Before transformation -->
28<div class="hover:(bg-gray-400 font-medium) font-(light mono)" />
29 
30<!-- After transformation -->
31<div class="hover:bg-gray-400 hover:font-medium font-light font-mono" />
32```
33 
34## Examples
35 
36### Hover States
37 
38```html
39<button class="hover:(bg-blue-600 text-white scale-105)">
40  Hover me
41</button>
42```
43 
44Expands to: `hover:bg-blue-600 hover:text-white hover:scale-105`
45 
46### Dark Mode
47 
48```html
49<div class="dark:(bg-gray-800 text-white)">
50  Dark content
51</div>
52```
53 
54Expands to: `dark:bg-gray-800 dark:text-white`
55 
56### Responsive
57 
58```html
59<div class="md:(flex items-center gap-4)">
60  Responsive flex
61</div>
62```
63 
64Expands to: `md:flex md:items-center md:gap-4`
65 
66### Nested Groups
67 
68```html
69<div class="lg:hover:(bg-blue-500 text-white)">
70  Large screen hover
71</div>
72```
73 
74Expands to: `lg:hover:bg-blue-500 lg:hover:text-white`
75 
76### Multiple Prefixes
77 
78```html
79<div class="text-(sm gray-600) font-(medium mono)">
80  Styled text
81</div>
82```
83 
84Expands to: `text-sm text-gray-600 font-medium font-mono`
85 
86## Key Points
87 
88- Use parentheses `()` to group utilities
89- The prefix applies to all utilities inside the group
90- Can be combined with any variant (hover, dark, responsive, etc.)
91- Nesting is supported
92- Works in class attributes and other extraction sources
93 
94<!-- 
95Source references:
96- https://unocss.dev/transformers/variant-group
97-->
98