반복적으로 사용하는 Tailwind CSS 클래스 패턴을(특정 요소에 정의한 클래스 그룹을 여러 곳에서 사용할 때) 하나의 커스텀 클래스로 추출해서 사용할 수 있다

배경 지식 — Tailwind CSS 3계층

Tailwind는 CSS 우선순위를 제어하기 위해 base components utilities 3개의 계층(layer)으로 구분한다. 이렇게 계층을 구분해두면 각 스타일이 어떻게 상호작용하는지 더 쉽게 이해할 수 있으며, @layer 지시문(해당 스타일이 어떤 계층에 속할지 지정)을 사용해 원하는 방식으로 선언 순서를 제어할 수 있게 된다. — 참고

• base : 일반 HTML 요소에 적용되는 재설정 규칙(reset rules) / 기본 스타일을 위한 레이어

• components : 유틸리티를 사용해 재정의할 수 있는, 클래스(class) 기반 스타일을 위한 레이어

• utilities : 다른 스타일보다 우선시되는 단일 목적 클래스를 위한 레이어

🔍️ 커스텀 스타일을 정의할 때 @layer 지시문을 사용하면, @tailwind 지시문으로 자동 재배치돼서 선언 순서를 제어하는데 도움을 주며, 커스텀 스타일에도 modifiers 및 tree shaking 기능이 적용된다.

• Modifiers 기능 : hover, responsive breakpoints, dark mode 등을 핸들링하는 Tailwind 문법

  ex) hover:bg-sky-700 lg:dark:content-auto

• Tree shaking 기능 : 사용하지 않은 클래스는 compiled CSS에 포함되지 않는 기능. @layer 지시문 없이 정의한 커스텀 스타일은 항상 compiled CSS에 포함됨

클래스 패턴 추출

@apply 지시문 사용

<aside> 💡 공식문서에선 @apply 지시문(directive)을 사용한 클래스 추상화는 form 조작이나 button 처럼 **“재사용성이 높은 작은 부분”**에 대해서만 사용할 것을 권고한다. @apply를 사용하면 CSS 번들 크기가 커지고 클래스 이름을 고려해야 되는 등 Tailwind 프레임워크가 가진 장점을 상쇄하기 때문이다 — 참고

</aside>

@apply 지시문은 커스텀 스타일内 유틸리티 클래스를 적용할 때 사용한다. ➊@apply 지시문으로 자주 사용하는 클래스 패턴을 추출해 새로운 커스텀 클래스를 만들거나, ➋기존 클래스(써드파티 라이브러리가 이미 정의해둔 클래스 등)에 새로운 스타일을 덮어쓸 수 있다.