Tailwind CSS 도입 후 3개월 사용기

도입 배경

2월부터 재택근무로 전환되면서 새 프로젝트를 시작하게 됐다. 기존 프로젝트에서 styled-components를 사용했는데, 컴포넌트마다 스타일 파일이 늘어나고 네이밍에 소모되는 시간이 아깝다는 생각이 들었다.

Tailwind CSS v1.2가 안정화됐다는 소식을 듣고 도입을 결정했다.

초기 적응

처음엔 className이 너무 길어지는 게 거슬렸다.

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

하지만 일주일 정도 사용하니 패턴이 보이기 시작했다. p-4, mt-2, flex items-center 같은 조합이 손에 익었다.

좋았던 점

1. 개발 속도 향상: 스타일 파일을 오가지 않아도 됐다. 마크업과 스타일을 동시에 작성할 수 있어 빨랐다.
2. 일관된 디자인 시스템: spacing, color 스케일이 정해져 있어 임의의 값을 쓰지 않게 됐다.
3. 번들 사이즈: PurgeCSS로 사용하지 않는 클래스를 제거하니 프로덕션 CSS가 10KB 이하로 줄었다.

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

아쉬운 점

복잡한 애니메이션이나 동적 스타일은 여전히 CSS-in-JS가 편했다. @apply로 클래스를 묶을 수 있지만, 그러면 Tailwind를 쓰는 이유가 약해진다.

결론

당분간 Tailwind를 계속 사용할 예정이다. 빠른 프로토타이핑이 필요한 프로젝트에 특히 적합했다.