Builder.shin

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

배경

재택근무 전환 이후 사내 어드민 시스템 개선 작업을 맡게 되었다. 기존에는 styled-components를 사용했는데, 컴포넌트마다 스타일 파일이 늘어나면서 관리 포인트가 많아졌다. 최근 Tailwind CSS가 주목받고 있어 이번 기회에 도입해보기로 했다.

설치 및 설정

npm install [email protected] postcss autoprefixer
npx tailwindcss init

CRA 프로젝트였기 때문에 CRACO를 추가로 설치해 PostCSS 설정을 커스터마이징했다.

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

마이그레이션 경험

처음에는 클래스명이 길어지는 게 거슬렸다. 하지만 익숙해지니 CSS 파일을 오가지 않아도 되는 점이 편했다. 특히 반응형 작업이 간결해졌다.

// Before
const Button = styled.button`
  padding: 0.5rem 1rem;
  background-color: #3b82f6;
  @media (min-width: 768px) {
    padding: 0.75rem 1.5rem;
  }
`;

// After
<button className="px-4 py-2 md:px-6 md:py-3 bg-blue-500">

장단점

장점

  • 빌드 사이즈 감소 (PurgeCSS 덕분)
  • 디자인 시스템 일관성 확보
  • CSS-in-JS 런타임 오버헤드 제거

단점

  • 클래스명이 길어져 JSX 가독성 저하
  • 팀원 학습 곡선
  • 복잡한 스타일은 여전히 커스텀 CSS 필요

결론

어드민처럼 디자인 변경이 잦지 않고 일관성이 중요한 프로젝트에는 적합했다. 다만 모든 프로젝트에 적용하기보다는 프로젝트 특성에 맞춰 선택하는 게 맞다고 생각한다.

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