ContextQMD
Back to Unocss

Variant group transformer

docs/transformers/variant-group.md

66.6.81.1 KB
Original Source

Variant group transformer

Enables the variant group feature of Windi CSS for UnoCSS.

Installation

::: code-group

bash
pnpm add -D @unocss/transformer-variant-group
bash
yarn add -D @unocss/transformer-variant-group
bash
npm install -D @unocss/transformer-variant-group
bash
bun add -D @unocss/transformer-variant-group

:::

ts
import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

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

::: tip This preset is included in the unocss package, you can also import it from there:

ts
import { transformerVariantGroup } from 'unocss'

:::

Usage

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

Will be transformed to:

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

License