React 프로젝트에 Tailwind CSS 도입 후기

배경

재택근무가 시작되면서 새 프로젝트를 맡게 됐다. 기존에는 Styled-components를 주로 사용했는데, 유틸리티 퍼스트 접근법이 궁금해서 Tailwind CSS를 도입해보기로 했다.

설정 과정

CRA 프로젝트에 적용하는 건 생각보다 간단했다. CRACO를 사용해 PostCSS 설정을 커스터마이징했다.

npm install -D [email protected] @craco/craco autoprefixer postcss
npx tailwindcss init

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
};

실사용 후기

처음엔 클래스명이 너무 길어서 거부감이 있었다. 하지만 일주일 정도 쓰니 CSS 파일을 왔다갔다 하는 시간이 확실히 줄었다.

// Before (Styled-components)
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.375rem;
  &:hover {
    background-color: #2563eb;
  }
`;

// After (Tailwind)
<button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">

반응형 작업도 훨씬 직관적이었다. md:, lg: prefix만 붙이면 되니 미디어쿼리를 따로 관리할 필요가 없었다.

팀 반응

디자이너와 협업할 때는 장단점이 있었다. 디자인 시스템의 spacing, color를 강제할 수 있어서 일관성은 좋아졌다. 대신 pixel-perfect 디자인을 요구받으면 tailwind.config.js를 계속 수정해야 했다.

Junior 개발자 한 명은 처음엔 클래스명 외우기 힘들어했지만, Intellisense 확장 설치 후엔 오히려 CSS 문법 몰라도 작업할 수 있다며 좋아했다.

결론

개발 속도는 확실히 빨라졌다. 다만 커스텀이 많이 필요한 컴포넌트는 여전히 Styled-components를 병행하고 있다. 당분간은 두 방식을 섞어 쓰면서 적절한 균형점을 찾아볼 예정이다.