UnoCSSVariant group transformer
Enables the variant group feature of Windi CSS for UnoCSS.
Installation
bash
pnpm add -D @unocss/transformer-variant-grouppnpm add -D @unocss/transformer-variant-groupbash
yarn add -D @unocss/transformer-variant-groupyarn add -D @unocss/transformer-variant-groupbash
npm install -D @unocss/transformer-variant-groupnpm install -D @unocss/transformer-variant-groupts
// 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(),
],
})Usage
html
<div class="hover:(bg-gray-400 font-medium) font-(light mono)"/><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"/><div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>License
- MIT License © 2021-PRESENT Anthony Fu