[FE] Tailwind CSS @apply

@apply

• Tailwind CSS 의 @apply 는 재사용 가능한 CSS 스타일을 만들 때 사용되는 기능이다.

사용 예시

반복되는 클래스 조합

/* 여러 곳에서 같은 버튼 스타일을 사용할 경우 */
.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors;
}

복잡한 컴포넌트 스타일

/* 복잡한 스타일 조합을 가진 컴포넌트 */
.card {
  @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
}

• 위와 같이 중복되는 스타일 선언을 줄이기 위해서 @apply 는 유용하다는 생각이 들었음
• 하지만 @apply 에 대해 고민해보니 Tailwind CSS 의 유틸리티 우선 철학과 충돌한다는 생각이 들었음
• 또한 Tailwind CSS 의 장점인 CSS 번들 크기 또한 증가할 것으로 예상했음
• 특히 @apply 클래스 선언을 위한 CSS 네이밍을 팀과 함께 고민해봐야함