Variants

Variants를 사용하면 Tailwind CSS의 hover: variant와 같이 기존 규칙에 일부 변형을 적용할 수 있습니다.

예제

ts

variants: [
  // hover:
  (matcher) => {
    if (!matcher.startsWith('hover:'))
      return matcher
    return {
      // slice `hover:` prefix and passed to the next variants and rules
      matcher: matcher.slice(6),
      selector: s => `${s}:hover`,
    }
  },
],
rules: [
  [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
]

matcher는 variant가 활성화되는 시점을 제어합니다. 반환 값이 문자열인 경우 규칙을 매칭하기 위한 선택자로 사용됩니다.
selector는 생성된 CSS 선택자를 커스터마이징할 수 있는 기능을 제공합니다.

내부 동작

hover:m-2를 매칭할 때 일어나는 일을 살펴보겠습니다:

hover:m-2가 사용자 사용에서 추출됩니다
hover:m-2가 모든 variant에 매칭을 위해 전송됩니다
hover:m-2가 우리의 variant에 의해 매칭되고 m-2를 반환합니다
결과 m-2는 다음 라운드의 variant 매칭에 사용됩니다
다른 variant가 매칭되지 않으면 m-2는 규칙 매칭으로 이동합니다
우리의 첫 번째 규칙이 매칭되고 .m-2 { margin: 0.5rem; }를 생성합니다
마지막으로, 생성된 CSS에 우리의 variant 변환을 적용합니다. 이 경우 selector 훅에 :hover를 앞에 추가합니다

결과적으로 다음 CSS가 생성됩니다:

css

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

이를 통해 사용자가 요소에 마우스를 올렸을 때만 m-2가 적용됩니다.

더 나아가기

Variant 시스템은 매우 강력하며 이 가이드에서 완전히 다룰 수 없습니다. 더 고급 사용법을 보려면 기본 preset의 구현을 확인하세요.