Varianti

Le Varianti ti permettono di applicare alcune variazioni alle tue regole esistenti, come la variante hover: di Tailwind CSS.

Esempio

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // taglia il prefisso `hover:` e passa alle varianti e regole successive
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher controlla quando la variante è abilitata. Se il valore di ritorno è una stringa, verrà usato come selettore per corrispondere alle regole.
• selector fornisce la possibilità di personalizzare il selettore CSS generato.

Sotto il cofano

Facciamo un tour di cosa succede quando si corrisponde a hover:m-2:

• hover:m-2 viene estratto dagli utilizzi degli utenti
• hover:m-2 viene inviato a tutte le varianti per la corrispondenza
• hover:m-2 viene corrisposto dalla nostra variante e restituisce m-2
• il risultato m-2 verrà usato per il prossimo round di corrispondenza delle varianti
• se nessun'altra variante viene corrisposta, m-2 andrà poi a corrispondere alle regole
• la nostra prima regola viene corrisposta e genera .m-2 { margin: 0.5rem; }
• infine, applichiamo la trasformazione delle nostre varianti al CSS generato. In questo caso, abbiamo preposto :hover all'hook selector

Come risultato, verrà generato il seguente CSS:

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

Con questo, potremmo avere m-2 applicato solo quando gli utenti passano il mouse sull'elemento.

Andare oltre

Il sistema di varianti è molto potente e non può essere coperto completamente in questa guida, puoi controllare l'implementazione del preset predefinito per vedere utilizzi più avanzati.