Arbitrary variants

Custom selectors without writing a separate stylesheet

Arbitrary variants let you express a selector directly in a utility class. They are useful for targeting a special relationship that does not justify a reusable custom variant.

Selector syntax

The & placeholder represents the element receiving the class. Underscores can represent spaces inside selectors.

Use carefully

Arbitrary variants are powerful, but if the same selector appears repeatedly, define a reusable custom variant or component rule so the design remains understandable.