Using transformerVariantGroup

transformerVariantGroup is a transformer that can be imported from unocss.

First import the transformer and add it to the transformers array. After doing so you will be able to use it by adding () next to the utilities.

  transformers: [
    transformerVariantGroup(),
  ],

When using transformerVariantGroup you can have a single prefix meaning for example font-(<all font related utilities>). You can even nest the groups like in hover:(text-(4xl blue-300) decoration-(blue-300 6 wavy)). Here is the HTML for the example in the preview, the first one normal and the second one using transformerVariantGroup:

<p
  class="font-lobster font-bold text-3xl text-blue-500 underline decoration-blue-500 decoration-3 decoration-double hover:text-4xl hover:text-blue-300 hover:decoration-blue-300 hover:decoration-6 hover:decoration-wavy">
  This is text using font-lobster.
</p>

<p
  class="font-(lobster bold) text-(3xl blue-500) underline decoration-(blue-500 3 double) hover:(text-(4xl blue-300) decoration-(blue-300 6 wavy))">
  This is text using font-lobster.
</p>