变体组转换器

为 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

bun

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

uno.config.ts

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

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

提示

此预设包含在 unocss 包中，你也可以从该包中导入它：

import { transformerVariantGroup } from 'unocss'

使用方法

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

将转换为：

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

许可证

• MIT 许可证 © 2021 年至今 Anthony Fu