Arbitrary Variants Extractor

A more complex extractor to support arbitrary variants for utilities.

html

<div class="[&>*]:m-1 [&[open]]:p-2"></div>

<div class="[&>*]:m-1 [&[open]]:p-2"></div>

Will be captured with [&>*]:m-1 and [&[open]]:p-2 as variants.

This extractor is included in @unocss/preset-mini as the default extractor. Normally you don't need to install this package manually.

Installation

pnpmyarnnpm

bash

pnpm add -D @unocss/extractor-arbitrary-variants

pnpm add -D @unocss/extractor-arbitrary-variants

bash

yarn add -D @unocss/extractor-arbitrary-variants

yarn add -D @unocss/extractor-arbitrary-variants

bash

npm install -D @unocss/extractor-arbitrary-variants

npm install -D @unocss/extractor-arbitrary-variants

import { defineConfig } from 'unocss'
import extractorArbitrary from '@unocss/extractor-arbitrary-variants'

export default defineConfig({
  extractors: [extractorArbitrary()]
})

import { defineConfig } from 'unocss'
import extractorArbitrary from '@unocss/extractor-arbitrary-variants'

export default defineConfig({
  extractors: [extractorArbitrary()]
})

Arbitrary Variants Extractor ​

Installation ​

Arbitrary Variants Extractor

Installation