Variant group 변환기

UnoCSS에서 Windi CSS의 variant group 기능을 활성화합니다.

설치

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

이 프리셋은 unocss 패키지에 포함되어 있으며, 다음과 같이 가져올 수도 있습니다:

import { transformerVariantGroup } from 'unocss'

사용법

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

다음과 같이 변환됩니다:

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

라이선스

• MIT License © 2021-PRESENT Anthony Fu