Variantes

Variantes permitem que você aplique algumas variações às suas regras existentes, como a variante hover: do Tailwind CSS.

Exemplo

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // corta o prefixo `hover:` e passa para as próximas variantes e regras
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher controla quando a variante é habilitada. Se o valor de retorno for uma string, será usada como seletor para corresponder às regras.
• selector fornece a possibilidade de personalizar o seletor CSS gerado.

Por baixo dos panos

Vamos fazer um tour do que acontece ao corresponder hover:m-2:

• hover:m-2 é extraído dos usos dos usuários
• hover:m-2 é enviado para todas as variantes para correspondência
• hover:m-2 é correspondido pela nossa variante e retorna m-2
• o resultado m-2 será usado para a próxima rodada de correspondência de variantes
• se nenhuma outra variante for correspondida, m-2 irá então corresponder às regras
• nossa primeira regra é correspondida e gera .m-2 { margin: 0.5rem; }
• finalmente, aplicamos a transformação de nossas variantes ao CSS gerado. Neste caso, antecedemos :hover ao gancho do selector

Como resultado, o seguinte CSS será gerado:

.hover\:m-2:hover { margin: 0.5rem; }

Com isso, poderíamos ter m-2 aplicado apenas quando os usuários passarem o mouse sobre o elemento.

Indo além

O sistema de variantes é muito poderoso e não pode ser totalmente coberto neste guia. Você pode verificar a implementação do preset padrão para ver usos mais avançados.