Tailwind CSS 도입 후 3개월 회고

도입 배경

기존 프로젝트는 SCSS 모듈 방식으로 스타일을 관리했다. 컴포넌트가 늘어나면서 클래스명 고민에 시간을 쓰고, 비슷한 스타일이 여러 파일에 중복되는 문제가 있었다. 팀 내에서 Tailwind CSS 도입을 논의했고, 신규 대시보드 프로젝트에 적용하기로 했다.

초기 설정

Next.js 프로젝트에 Tailwind 2.0을 설치했다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

tailwind.config.js에서 purge 설정을 통해 프로덕션 빌드 크기를 최적화했다.

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

마주친 문제들

1. 긴 className

복잡한 UI는 className이 20개 이상 붙는 경우가 있었다. @apply 디렉티브로 재사용 가능한 클래스를 만들어 해결했다.

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

2. 디자이너와의 협업

Tailwind 기본 spacing, color 팔레트를 디자인 시스템에 맞게 커스터마이징했다. 디자이너에게 설정 파일을 공유하니 소통이 원활해졌다.

3. 기존 SCSS와의 공존

점진적 마이그레이션을 위해 당분간 SCSS와 함께 사용했다. specificity 충돌은 거의 없었고, 새 컴포넌트만 Tailwind로 작성했다.

체감한 장점

• CSS 파일을 오가지 않아 개발 속도 향상
• 일관된 spacing, color 사용으로 디자인 통일성 확보
• purge 덕분에 번들 크기 10KB 미만 유지
• 반응형 처리가 직관적 (md:flex, lg:grid)

결론

utility-first 방식이 모든 프로젝트에 맞는 건 아니지만, 이번 프로젝트엔 확실히 생산성 향상이 있었다. 팀원들도 적응 후 만족도가 높아 다른 프로젝트에도 확대 적용할 예정이다.