Setting the file. One moment.
Subchapter 10.23
references/transformer-variant-group.mdMarkdown2 KBView on GitHub
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" /><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
<div class="dark:(bg-gray-800 text-white)">
Dark content
</div>Expands to: dark:bg-gray-800 dark:text-white
<div class="md:(flex items-center gap-4)">
Responsive flex
</div>Expands to: md:flex md:items-center md:gap-4
<div class="lg:hover:(bg-blue-500 text-white)">
Large screen hover
</div>Expands to: lg:hover:bg-blue-500 lg:hover:text-white
<div class="text-(sm gray-600) font-(medium mono)">
Styled text
</div>Expands to: text-sm text-gray-600 font-medium font-mono
() to group utilities