tailwind.config.ts에 정의

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      primary: '#3B82F6',
    }
  }
}

// 사용
<button className="bg-primary">버튼</button>

• 전역적으로 값을 정의
• 색상, 간격, 크기 등 재사용할 값들을 관리
• 일관된 디자인 시스템 구축에 적합

@apply로 추출

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600;
}

// 사용
<button className="btn-primary">버튼</button>

• 클래스의 조합을 하나의 클래스로 추출
• 자주 사용되는 스타일 조합을 관리
• 반복되는 클래스명을 줄이는데 적합

결론

• config: 디자인 시스템의 기본 값 정의 (색상, 크기 등)
• @apply: 자주 사용되는 스타일 조합 정의