Variant group transformer

Schakelt de variant group feature van Windi CSS in voor UnoCSS.

Installatie

pnpm

pnpm add -D @unocss/transformer-variant-group

yarn

yarn add -D @unocss/transformer-variant-group

npm

npm install -D @unocss/transformer-variant-group

bun

bun add -D @unocss/transformer-variant-group

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

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

TIP

Deze preset is opgenomen in het unocss pakket, je kunt het ook vandaar importeren:

import { transformerVariantGroup } from 'unocss'

Gebruik

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

Zal worden getransformeerd naar: