Tailwind CSS 도입 후 1개월 회고

도입 배경

코로나로 인한 전면 재택근무가 시작되면서 CSS 작업에 대한 커뮤니케이션 비용이 생각보다 컸다. 기존 styled-components 기반 프로젝트에서 컴포넌트명, 스타일 속성명에 대한 논의가 슬랙으로 오가는 것이 비효율적이었다.

적용 과정

Next.js 9 프로젝트에 Tailwind CSS 1.4를 도입했다. PostCSS 설정이 필요했다.

// postcss.config.js
module.exports = {
  plugins: [
    'tailwindcss',
    'autoprefixer',
  ],
}

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,jsx}', './components/**/*.{js,jsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#1a73e8',
      },
    },
  },
}

장점

1. 클래스명 고민 불필요: UserProfileContainer, user-profile-wrapper 같은 네이밍 고민이 사라졌다
2. 일관된 디자인 시스템: spacing, color 등이 자동으로 제한되어 디자인 일관성 유지
3. 빠른 프로토타이핑: 마크업과 스타일을 동시에 작성 가능

단점

1. HTML 가독성 저하: 클래스명이 길어져 JSX가 복잡해 보임
2. 학습 곡곡: 팀원들이 클래스명을 외우는 데 시간 필요
3. 커스텀 스타일: 디자인 시스템 밖의 스타일은 여전히 별도 CSS 필요

현재 사용 패턴

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

const Button = ({ variant = 'primary', children }) => {
  const baseClass = 'px-4 py-2 rounded font-medium';
  const variantClass = variant === 'primary' 
    ? 'bg-blue-600 text-white hover:bg-blue-700'
    : 'bg-gray-200 text-gray-800 hover:bg-gray-300';
  
  return (
    <button className={`${baseClass} ${variantClass}`}>
      {children}
    </button>
  );
};

결론

재택 환경에서 CSS 커뮤니케이션 비용을 확실히 줄였다. 당분간 새 프로젝트에는 계속 사용할 예정이다. 다만 기존 프로젝트 마이그레이션은 ROI를 고려해야 할 것 같다.