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.
js
variants: [
['print', '@media print'],
['odd', '&:nth-child(odd)'],
['open', '&[open]'],
]
Dynamic Variants
Dynamic Variants allow to create variants based on the current match and context. The next example create a ltr
/rtl
variant:
js
variants: [
['(ltr|rtl)', ({ 1: $1 }) => `[dir="${$1}"] &`],
],
Further Reading
There are some more options and helpers available to create variants. You can find more examples in the official presets: