You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
760 B
41 lines
760 B
2 years ago
|
# @unocss/transformer-variant-group
|
||
|
|
|
||
|
|
<!-- @unocss-ignore -->
|
||
|
|
|
||
|
|
Enables the [variant group feature of Windi CSS](https://windicss.org/features/variant-groups.html) for UnoCSS.
|
||
|
|
|
||
|
|
## Install
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm i -D @unocss/transformer-variant-group
|
||
|
|
```
|
||
|
|
|
||
|
|
```ts
|
||
|
|
// uno.config.js
|
||
|
|
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)"/>
|
||
|
|
```
|
||
|
|
|
||
|
|
Will be transformed to:
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div class="hover:bg-gray-400 hover:font-medium font-light font-mono"/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)
|