@apply - tailwind css 에서 사용하는 이유

@apply는 Tailwind CSS 유틸리티 클래스를 재사용 가능한 커스텀 스타일로 그룹화할 때 사용됩니다. 

• 중복 제거: 동일한 유틸리티 클래스를 여러 곳에서 사용할 때 반복되는 코드를 줄일 수 있습니다.
• 가독성 향상: 클래스가 많아지면 코드가 복잡해지기 때문에, @apply를 사용해 코드를 더 깔끔하게 유지할 수 있습니다.
• 재사용성: 자주 사용하는 스타일을 하나의 클래스처럼 관리하여 유지보수성을 높입니다.
• index.css 또는 globals.css 파일에 작성합니다.
• Tailwind의 기본 스타일과 충돌할 수 있으므로 클래스 이름을 명확하게 정의

/* index.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-500 text-white py-2 px-4 rounded;
}

const ButtonExample = () => (
  <div>
    <button className="btn-primary">Primary Button</button>
    <button className="btn-secondary">Secondary Button</button>
  </div>
);

export default ButtonExample;

• :hover, :focus 같은 상태 클래스도 함께 사용 가능
• 반응형 유틸리티도 @apply로 사용할 수 있습니다.

.btn-primary:hover {
  @apply bg-blue-700;
}

.responsive-card {
  @apply p-4 md:p-8 lg:p-12;
}