Twind.style
  1. Configuration
  2. Variants

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: