Tailwind CSS 도입 후 컴포넌트 스타일링 방식 변화

배경

회사 신규 프로젝트에서 Tailwind CSS 2.0을 도입하기로 결정했다. 기존에는 styled-components를 주로 사용했는데, 팀 내에서 CSS 파일 크기와 런타임 오버헤드에 대한 우려가 있었다.

초기 거부감

처음 Tailwind 코드를 봤을 때 솔직히 거부감이 들었다.

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

클래스명이 너무 길고 HTML이 지저분해 보였다. 관심사 분리 원칙에도 어긋나는 것 같았다.

실제 사용 후 느낀 점

일주일 정도 사용하니 생각이 바뀌었다.

장점

1. 빠른 프로토타이핑: 별도 CSS 파일 왔다갔다 할 필요 없이 마크업만으로 스타일링 완료
2. 일관된 디자인 시스템: spacing, color 등이 정해진 scale로 제한되어 임의의 값 사용 감소
3. 번들 크기: PurgeCSS로 미사용 클래스 제거하니 최종 CSS가 10KB 미만
4. 네이밍 고민 해소: "이 버튼 클래스명 뭐로 하지?" 같은 고민 사라짐

컴포넌트 추상화

반복되는 스타일은 컴포넌트로 추상화했다.

const Button = ({ variant = 'primary', children, ...props }) => {
  const baseClasses = 'font-bold py-2 px-4 rounded';
  const variantClasses = {
    primary: 'bg-blue-500 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-500 hover:bg-gray-700 text-white',
  };
  
  return (
    <button 
      className={`${baseClasses} ${variantClasses[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
};

결론

Tailwind는 생각보다 학습곡선이 낮고 생산성 향상이 확실했다. 다만 디자이너와의 협업 시 디자인 토큰을 tailwind.config.js에 잘 정의하는 것이 중요하다는 걸 깨달았다. 다음 프로젝트에서도 계속 사용할 예정이다.