變體組轉換器

為 UnoCSS 啟用 Windi CSS 的變體組功能。

安裝

pnpm

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

yarn

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

npm

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

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

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

用法

<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 許可證 © 2021-現在 Anthony Fu