Variante

Variantele vă permit să aplicați unele variații la regulile dvs. existente, cum ar fi varianta hover: din Tailwind CSS.

Exemplu

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // taie prefixul `hover:` și îl transmite următoarelor variante și reguli
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher controlează când varianta este activată. Dacă valoarea returnată este un string, acesta va fi folosit ca selector pentru potrivirea regulilor.
• selector oferă disponibilitatea de a personaliza selectorul CSS generat.

Sub capotă

Să facem un tur despre ce s-a întâmplat când s-a potrivit pentru hover:m-2:

• hover:m-2 este extras din utilizările utilizatorilor
• hover:m-2 este trimis la toate variantele pentru potrivire
• hover:m-2 este potrivit de varianta noastră și returnează m-2
• rezultatul m-2 va fi folosit pentru următoarea rundă de potrivire a variantelor
• dacă nicio altă variantă nu este potrivită, m-2 va apoi potrivi regulile
• prima noastră regulă este potrivită și generează .m-2 { margin: 0.5rem; }
• în final, aplicăm transformările variantelor noastre la CSS-ul generat. În acest caz, am adăugat :hover la hook-ul selector

Ca rezultat, următorul CSS va fi generat:

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

Cu aceasta, am putea avea m-2 aplicat doar când utilizatorii trec cu mouse-ul peste element.

Mergând mai departe

Sistemul de variante este foarte puternic și nu poate fi acoperit complet în acest ghid, puteți verifica implementarea preset-ului implicit pentru a vedea utilizări mai avansate.