Tailwind CSS 도입 후 3개월 사용 후기

도입 배경

레거시 프로젝트의 CSS가 7000줄을 넘어서면서 유지보수가 힘들어졌다. BEM 방식으로 작성했지만 네이밍 규칙이 일관되지 않았고, 사용하지 않는 스타일을 찾아내기도 어려웠다.

재택근무로 인해 디자이너와의 실시간 소통이 줄어들면서, 일관된 디자인 시스템의 필요성이 더 커졌다. Tailwind CSS 2.0이 출시되면서 본격적으로 검토를 시작했다.

초기 거부감

<!-- Before -->
<div class="card card--primary">
  <h2 class="card__title">제목</h2>
</div>

<!-- After -->
<div class="bg-blue-500 rounded-lg p-6 shadow-md">
  <h2 class="text-xl font-bold text-white">제목</h2>
</div>

HTML이 지저분해 보였다. "CSS를 다시 inline style로 돌리는 건가?" 싶었다. 하지만 실제로 써보니 생각이 달라졌다.

실제 사용 경험

장점:

• 새로운 CSS 파일을 만들지 않아도 됨
• 반응형 처리가 직관적 (md:flex, lg:grid)
• 불필요한 CSS가 PurgeCSS로 자동 제거됨
• 디자인 시스템(색상, 간격)이 자연스럽게 통일됨

단점:

• 복잡한 컴포넌트는 클래스가 너무 길어짐
• 팀원들의 학습 곡선
• 커스텀 디자인 대응 시 tailwind.config.js 수정 필요

해결 방법

복잡한 컴포넌트는 @apply 지시어로 분리했다.

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

팀 컨벤션으로 자주 쓰는 조합을 컴포넌트화하기로 했다.

결론

빌드 결과물 CSS가 120KB에서 8KB로 줄었다. 새 기능 개발 속도도 체감상 20% 정도 빨라졌다. 초기 거부감만 넘으면 충분히 생산적인 선택이었다.