Tailwind CSS: 개발자를 위한 디자인 시스템의 한계

# Tailwind CSS가 확장 가능한 디자인 시스템을 제한하는 이유: 접근법 분석

Tailwind CSS는 프로토타이핑을 빠르게 해주지만, 유틸리티 우선 접근법이 확장 시 골칫거리로 작용합니다. 디자인 시스템에서 버튼 같은 컴포넌트는 다양한 변형, 크기, 상태 조합이 필요하죠. btn-focus 같은 새 변형을 추가할 때 btn-sm, btn-lg, btn-outline과 잘 어우러져야 합니다. 호버(15% 어두워짐)나 액티브(10% 밝아짐) 같은 상태는 모든 곳에서 일관되게 적용되어야 해요. 전통적인 프레임워크는 믹스인으로 이런 걸 처리하죠:

.button-variant-other(@color; @background; @border);

Tailwind는 이런 원활한 통합을 위한 내장 도구가 없어 타협이 불가피합니다.

CVA: 빠르지만 제한적

Shadcn은 고정된 변형과 크기로 버튼에 CVA를 사용합니다:

variant "default" | "outline" | "ghost" | "destructive" | "secondary" | "link"
size "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"

장점:

• 파일 간 이동 없이 빠른 개발.
• 기본 케이스에 깔끔한 API.

단점은 장기 프로젝트에서 드러납니다:

• primary outlined small 같은 조합은 꼼수 없인 불가능.
• 고정 조합이 6개월 후 기술 부채 쌓임.

간단한 앱엔 괜찮지만, 엔터프라이즈 개발에선 비용 증가.

CSS 변수: 유연한 해결책

CSS 변수는 상태 로직을 변형에서 분리합니다:

.btn {
  @apply inline-flex items-center justify-center rounded px-4 py-2 font-body;
  background-color: var(--btn-color);
  color: var(--btn-text, white);
}

.btn:hover {
  background-color: color-mix(in srgb, var(--btn-color), black 15%);
}

.btn:active {
  filter: brightness(1.1);
}

.btn-primary {
  --btn-color: theme('colors.blue.600');
}
.btn-whatever {
  --btn-color: …;
}

주요 이점:

• 모든 색상에 자동 상태 적용.
• 변수로 쉬운 변형 추가.
• 어떤 UI 라이브러리든 호환.

Tailwind 팬들에겐 단점: 스타일이 별도 파일로 이동해 약간 속도 저하.

@utility 지시자: 유틸리티 해킹

이 지시자는 동적으로 클래스를 생성합니다:

@utility btn-* {
  font-size: --value(--text-ui-*, [length]);
  background-color: --value(--color-ui-*, [color]);
  color: --value(--color-ui-*-text, [color]);
}

Tailwind 수정자와 호버나 반응형에 잘 맞지만:

• btn-focus가 sm이나 lg로 확장 안 됨—기능 클래스 한계.
• primary small outline 구축 시 취약한 컴포넌트 수정 필요.
• 복잡한 조합에서 무너짐.

접근법 비교

| 접근법 | 속도 | 확장성 | 상태 통합 | Tailwind 의존도 |

|------------|---------|----------|---------------|-----------------|

| CVA | 높음 | 낮음 | 제한적 | 높음 |

| CSS 변수 | 중간 | 높음 | 완전 | 낮음 |

| @utility | 중간 | 중간 | 부분적 | 높음 |

CVA는 MVP에 강하고, CSS 변수는 프로덕션에 적합하며, @utility는 중간 지점입니다.

주요 교훈

• Tailwind가 구조를 강제하지 않음: 유틸리티 우선은 DIY 시스템 요구.
• 클래스로 컴포넌트: 복잡한 디자인 시스템을 경직된 옵션에 가둠.
• 기술 부채 경고: 초기 단순함이 6개월 후 리팩토링 부름.
• 대안 제공: CSS 변수로 Tailwind 포기 없이 유연성 확보.

Tailwind는 빠른 시작에 최고지만, 성숙한 디자인 시스템은 하이브리드 설정이나 유틸리티 완화가 필요합니다.

— Editorial Team