UnoCSS 中文网

主题

变体组转换器 ​

🌐 Variant group transformer

为 UnoCSS 启用 Windi CSS 的 变体组功能。

🌐 Enables the variant group feature of Windi CSS for UnoCSS.

安装 ​

🌐 Installation

bash
pnpm add -D @unocss/transformer-variant-group
bash
yarn add -D @unocss/transformer-variant-group
bash
npm install -D @unocss/transformer-variant-group
bash
bun add -D @unocss/transformer-variant-group
uno.config.ts
ts
import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

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

TIP

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

ts
import { transformerVariantGroup } from 'unocss'

用法 ​

🌐 Usage

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

将转变为：

🌐 Will be transformed to:

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

许可 ​

🌐 License