Tailwind CSS 도입 후 3개월 회고

도입 배경

기존 프로젝트는 styled-components를 사용했는데, 컴포넌트가 늘어나면서 스타일 네이밍에 시간을 많이 쓰게 됐다. Container, Wrapper, Box 같은 이름이 반복되고, 파일 하단에 styled component 정의가 쌓이면서 가독성도 떨어졌다.

Tailwind CSS가 화제라길래 사이드 프로젝트에 적용해봤고, 팀 설득 끝에 신규 어드민 페이지에 도입했다.

초기 우려사항

가장 큰 우려는 HTML이 지저분해진다는 점이었다.

<div className="flex items-center justify-between px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-sm">

실제로 클래스명이 길어지긴 했다. 하지만 3개월 써보니 이게 생각보다 문제가 아니었다. 오히려 HTML만 봐도 스타일이 바로 보여서 파일 왕복이 줄었다.

실제 장점

1. 네이밍 고민 제거

가장 큰 장점. 더 이상 PrimaryButton, SecondaryButton, ButtonWrapper 같은 이름을 고민하지 않는다.

2. 일관된 디자인 시스템

spacing, color 같은 설정을 tailwind.config.js에서 관리하니 디자이너와 협업이 수월해졌다.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
}

3. 번들 사이즈

PurgeCSS로 미사용 클래스를 제거하니 최종 CSS가 8KB 정도로 줄었다. styled-components를 쓸 때보다 확실히 작다.

단점

복잡한 반응형 스타일은 여전히 복잡하다. md:, lg: prefix가 중첩되면 가독성이 떨어진다. 이런 경우는 그냥 커스텀 CSS 클래스를 만들어 @apply로 처리했다.

결론

재택근무 하면서 빠른 프로토타이핑이 중요해졌는데, Tailwind가 이 목적에 잘 맞았다. 당분간 신규 프로젝트는 Tailwind로 시작할 예정이다.