Варианты

Варианты позволяют применять различные модификации к существующим правилам, подобно варианту hover: из Tailwind CSS.

Пример

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // отрезаем префикс `hover:` и передаем дальше следующим вариантам и правилам
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

• matcher контролирует, когда вариант включается. Если возвращаемое значение является строкой, оно будет использовано в качестве селектора для сопоставления правил.
• selector предоставляет возможность настройки сгенерированного CSS-селектора.

Под капотом

Давайте посмотрим, что происходит при сопоставлении hover:m-2:

• hover:m-2 извлекается из пользовательского кода
• hover:m-2 отправляется всем вариантам для сопоставления
• hover:m-2 совпадает с нашим вариантом, и он возвращает m-2
• результат m-2 будет использован для следующего раунда сопоставления вариантов
• если никакой другой вариант не совпадет, m-2 затем отправится на сопоставление с правилами
• наше первое правило совпадает и генерирует .m-2 { margin: 0.5rem; }
• наконец, мы применяем трансформацию наших вариантов к сгенерированному CSS. В этом случае мы добавили :hover в хуке selector

В результате будет сгенерирован следующий CSS:

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

Благодаря этому мы можем сделать так, чтобы m-2 применялся только при наведении пользователем курсора на элемент.

Следующие шаги

Система вариантов очень мощная, и её невозможно полностью охватить в этом руководстве. Вы можете ознакомиться с реализацией пресета по умолчанию, чтобы увидеть более продвинутые примеры использования.