Tailwind CSS 도입 후 3개월 회고

도입 배경

사내 어드민 프로젝트를 리뉴얼하면서 CSS 방식을 재검토했다. 기존에는 Styled-components를 사용했는데, 컴포넌트마다 스타일을 작성하다 보니 일관성이 떨어지고 네이밍에 시간을 많이 쓰게 됐다.

Tailwind CSS는 유틸리티 클래스 기반이라 처음엔 거부감이 있었다. HTML이 지저분해 보였고, 인라인 스타일과 다를 게 없어 보였다.

실제 사용 경험

// Before: Styled-components
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  &:hover {
    background-color: #2563eb;
  }
`;

// After: Tailwind
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  클릭
</button>

3개월 사용하며 느낀 장점:

디자인 일관성: spacing, color 등이 시스템화되어 있어 임의의 값을 쓰지 않게 됐다.
빠른 프로토타이핑: 컴포넌트 파일을 오가지 않고 마크업만으로 UI를 빠르게 구성할 수 있었다.
번들 사이즈: PurgeCSS로 미사용 클래스를 제거하니 최종 CSS가 10KB 이하로 줄었다.

아쉬운 점

클래스명이 길어지면 가독성이 떨어진다. @apply로 추출할 수 있지만, 그러면 Tailwind를 쓰는 의미가 반감된다.
팀원들의 학습 곡선이 있었다. 특히 반응형 접두사(md:, lg:)에 익숙해지는 데 시간이 걸렸다.

결론

디자인 시스템이 필요한 프로젝트에서는 Tailwind가 확실히 효율적이다. 다만 모든 프로젝트에 적합한 것은 아니고, 팀의 작업 방식에 따라 선택해야 한다. 우리 팀은 당분간 Tailwind를 메인으로 사용할 예정이다.