Tailwind CSS 도입 후 3개월 회고

도입 배경

사내 대시보드 프로젝트를 진행하면서 CSS 관리가 점점 복잡해지고 있었다. Styled-components를 쓰고 있었지만, 컴포넌트마다 스타일 코드가 길어지고 네이밍에 시간을 많이 쓰게 됐다.

재택근무로 전환되면서 새 프로젝트 셋업 기회가 생겼고, Tailwind CSS 2.0을 도입해보기로 했다.

적응 과정

처음엔 HTML이 지저분해 보였다.

// 이전
<Button primary large>확인</Button>

// Tailwind 도입 후
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  확인
</button>

하지만 2주 정도 쓰다 보니 장점이 명확했다.

• CSS 파일을 왔다갔다 할 필요 없음
• 클래스명 고민 시간 제로
• 디자인 시스템이 자연스럽게 통일됨 (spacing, color 등)

실전 팁

1. @apply로 반복 줄이기

자주 쓰는 조합은 커스텀 클래스로 만들었다.

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

2. PurgeCSS 설정 필수

프로덕션 빌드 시 사용하지 않는 클래스를 제거해야 한다. 설정 안 하면 번들 크기가 엄청나게 커진다.

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  // ...
}

3. 조건부 클래스는 clsx 활용

import clsx from 'clsx';

const Button = ({ primary, disabled }) => (
  <button className={clsx(
    'py-2 px-4 rounded',
    primary ? 'bg-blue-500' : 'bg-gray-500',
    disabled && 'opacity-50 cursor-not-allowed'
  )}>
    버튼
  </button>
);

아쉬운 점

• 클래스명이 너무 길어지는 건 여전히 거슬림
• 팀원들 초기 학습 곡선 존재
• IDE 자동완성 플러그인 필수

그래도 전체적으로 만족스럽다. 다음 프로젝트에도 계속 쓸 예정이다.