Varianten

Varianten stellen je in staat om enkele variaties toe te passen op je bestaande regels, zoals de hover: variant van Tailwind CSS.

Voorbeeld

varianten: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // verwijder `hover:` prefix en geef door naar de volgende varianten en regels
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher controleert wanneer de variant is ingeschakeld. Als de geretourneerde waarde een string is, zal deze worden gebruikt als de selector voor het matchen van de regels.
• selector biedt de mogelijkheid om de gegenereerde CSS selector aan te passen.

Onder de motorkap

Laten we een tour maken van wat er gebeurde bij het matchen van hover:m-2:

• hover:m-2 wordt geëxtraheerd uit gebruikers
• hover:m-2 wordt naar alle varianten gestuurd voor matching
• hover:m-2 wordt gematcht door onze variant en retourneert m-2
• het resultaat m-2 zal worden gebruikt voor de volgende ronde van variant matching
• als geen andere variant wordt gematcht, gaat m-2 dan naar het matchen van de regels
• onze eerste regel wordt gematcht en genereert .m-2 { margin: 0.5rem; }
• tot slot passen we de transformatie van onze varianten toe op de gegenereerde CSS. In dit geval hebben we :hover toegevoegd aan de selector hook

Als resultaat wordt de volgende CSS gegenereerd:

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

Hiermee kunnen we m-2 alleen laten toepassen wanneer gebruikers over het element hoveren.

Verder gaan

Het variant systeem is zeer krachtig en kan niet volledig worden behandeld in deze handleiding, je kunt de implementatie van de standaard preset controleren om meer geavanceerde toepassingen te zien.