Warianty

Warianty pozwalają stosować różne wariacje do istniejących reguł, jak wariant hover: z Tailwind CSS.

Przykład

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // odetnij prefiks `hover:` i przekaż do następnych wariantów i reguł
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher kontroluje, kiedy wariant jest włączony. Jeśli zwracana wartość jest ciągiem znaków, będzie używana jako selektor do dopasowywania reguł.
• selector zapewnia możliwość dostosowywania generowanego selektora CSS.

Pod maską

Zróbmy przegląd tego, co się dzieje podczas dopasowywania dla hover:m-2:

• hover:m-2 jest ekstrahowany z użyć użytkownika
• hover:m-2 jest wysyłany do wszystkich wariantów do dopasowania
• hover:m-2 jest dopasowany przez nasz wariant i zwraca m-2
• wynik m-2 będzie użyty do następnej rundy dopasowywania wariantów
• jeśli żaden inny wariant nie jest dopasowany, m-2 przejdzie do dopasowywania reguł
• nasza pierwsza reguła zostaje dopasowana i generuje .m-2 { margin: 0.5rem; }
• na końcu stosujemy transformację naszych wariantów do wygenerowanego CSS. W tym przypadku dodaliśmy :hover do hooka selector

W rezultacie zostanie wygenerowany następujący CSS:

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

Dzięki temu, m-2 będzie stosowane tylko wtedy, gdy użytkownik najeżdża na element.

Idąc dalej

System wariantów jest bardzo potężny i nie może być w pełni omówiony w tym przewodniku, możesz sprawdzić implementację domyślnego preseta, aby zobaczyć bardziej zaawansowane użycia.