Варианты

Варианты позволяют применять некоторые вариации к существующим правилам, например, вариант 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 будет применяться только при наведении пользователя на элемент.

Углубляемся

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