Tailwind CSS 베스트 프랙티스

Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르고 효율적인 스타일링을 가능하게 합니다.

1. 컴포넌트 추출

반복되는 클래스 조합은 컴포넌트로 추출하세요.

const Button = ({ children, variant }) => (
  <button className={`px-4 py-2 rounded ${variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500'}`}>
    {children}
  </button>
);

2. 커스텀 클래스 활용

자주 사용하는 클래스 조합은 @apply 디렉티브로 추출할 수 있습니다.

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

3. 다크 모드 지원

Tailwind의 다크 모드 기능을 활용하면 쉽게 다크 테마를 구현할 수 있습니다.

<div className="bg-white dark:bg-gray-800">
  <p className="text-gray-900 dark:text-white">내용</p>
</div>

이러한 패턴들을 활용하면 Tailwind CSS를 더 효율적으로 사용할 수 있습니다.