1. Styled Components의 재사용 방식

const PrimaryButton = styled.button`
  background: blue;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
`;

• 하나의 PrimaryButton 컴포넌트를 만들고, 여러 곳에 그대로 사용 가능
• 스타일과 컴포넌트가 같이 캡슐화

2. Tailwind의 재사용 방식

방법 A: 클래스 변수화

const primaryButtonClass = 'bg-blue-500 text-white py-3 px-6 rounded font-bold';

<butto className={primaryButtonClass}>Click</button>

• 단순하고 빠름, 하지만 스타일 분리도는 낮음

방법 B: 컴포넌트로 추상화

function PrimaryButton({ children, ...props }) {
  return (
    <button className="bg-blue-500 text-white py-3 px-6 rounded font-bold" {...props}>
      {children}
    </button>
  );
}

• Tailwind 스타일을 가진 컴포넌트로 캡슐화 → Styled Components와 사용 패턴 동일

방법 C: @apply를 사용한 CSS 추상화 (PostCSS)

/* button.module.css */
.primary {
  @apply bg-blue-500 text-white py-3 px-6 rounded font-bold; /* @apply */
}

import styles from './button.module.css';

<button className={styles.primary}>Click</button>

• Tailwind 유틸리티를 사용하지만, 클래스명을 추상화해서 재사용성 확보