Tailwind CSS 도입 후 3개월 회고

도입 배경

회사 신규 프로젝트에서 styled-components 대신 Tailwind CSS를 선택했다. 재택근무가 시작되면서 CSS 컨벤션 관리가 어려워졌고, 유틸리티 클래스 방식이 리뷰에 유리할 것 같았다.

초반 거부감

처음 일주일은 솔직히 고통스러웠다. HTML이 지저분해 보였고, 클래스명을 계속 찾아봐야 했다.

// 이전 styled-components
<Button primary large>Submit</Button>

// Tailwind
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg">
  Submit
</button>

하지만 2주차부터 VS Code 익스텐션(Tailwind CSS IntelliSense)으로 자동완성이 되면서 속도가 붙기 시작했다.

실제 장점들

1. CSS 파일 크기 감소

PurgeCSS 설정으로 프로덕션 빌드 시 사용하지 않는 클래스가 제거된다. 기존 80KB였던 CSS 번들이 12KB로 줄었다.

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

2. 반응형 작업 속도

sm:, md:, lg: 프리픽스로 미디어쿼리 없이 반응형 처리가 가능했다.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  {/* 모바일 1열, 태블릿 2열, 데스크톱 4열 */}
</div>

3. 네이밍 고민 제거

"이 컴포넌트 이름을 뭐라고 하지?" 같은 고민이 사라졌다. 특히 일회성 래퍼 div에 클래스명 짓는 시간이 아까웠는데 이게 해결됐다.

단점과 해결

재사용 컴포넌트는 여전히 필요

버튼, 카드 같은 반복 요소는 결국 React 컴포넌트로 추상화했다.

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가 잘 맞았다. 초기 러닝커브는 있지만 팀원들도 한 달 정도면 적응했다. 다음 프로젝트에서도 계속 사용할 예정이다.