Varianter

Varianter låter dig tillämpa vissa variationer på dina befintliga regler, som hover:-varianten från Tailwind CSS.

Exempel

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // skär av `hover:` prefix och skicka till nästa varianter och regler
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher kontrollerar när varianten är aktiverad. Om returvärdet är en sträng kommer det att användas som selektor för att matcha reglerna.
• selector tillhandahåller möjligheten att anpassa den genererade CSS-selektorn.

Under huven

Låt oss göra en genomgång av vad som händer vid matchning av hover:m-2:

• hover:m-2 extraheras från användares användningar
• hover:m-2 skickas till alla varianter för matchning
• hover:m-2 matchas av vår variant och returnerar m-2
• resultatet m-2 kommer att användas för nästa omgång av variantmatchning
• om ingen annan variant matchas kommer m-2 sedan att gå till att matcha reglerna
• vår första regel matchas och genererar .m-2 { margin: 0.5rem; }
• slutligen tillämpar vi våra varianters transformation på den genererade CSS:en. I detta fall lade vi till :hover i början av selector-kroken

Som ett resultat kommer följande CSS att genereras:

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

Med detta kan vi få m-2 att tillämpas endast när användaren hovrar över elementet.

Fördjupning

Variantsystemet är mycket kraftfullt och kan inte täckas helt i denna guide, du kan kontrollera standardpresetens implementation för att se mer avancerad användning.