バリアントグループトランスフォーマー

UnoCSS のための Windi CSS のバリアントグループ機能を有効にします (@unocss/transformer-variant-group)

バリアントグループトランスフォーマー

UnoCSS のための Windi CSS のバリアントグループ機能を有効にします。

インストール

::: code-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

:::

uno.config.ts

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" />

ライセンス

※このページは Nuxt.js 公式ドキュメントの翻訳ページです。

公式ドキュメントの該当ページはこちら：
#