变体组转换器

为 UnoCSS 启用 Windi CSS 的变体组特性。

安装

pnpmyarnnpm

bash

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

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

bash

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

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

bash

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

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(),
  ],
})

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

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

使用方法

html

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

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

将被转换为：

html

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

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

变体组转换器 ​

安装 ​

使用方法 ​

License ​

变体组转换器

安装

使用方法

License