Configuration
Variants
Variants allow to specify under what circumstances utilities will be activated.
The variants
option is an array of variant declarations. When twind encounters a variant that matches a variant declaration it will call the resolver function with the match and the current context.
Twind already includes some default variants:
dark
for dark mode- screen variants based on the
screens
theme section - all simple pseudo classes like
:hover
Static Variants
Static variants are mapping a variant name to a selector or at-rule.
Dynamic Variants
Dynamic Variants allow to create variants based on the current match and context. The next example create a ltr
/rtl
variant:
Further Reading
There are some more options and helpers available to create variants. You can find more examples in the official presets: