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

도입 배경

재택근무가 길어지면서 협업 방식을 재점검하게 됐다. 특히 styled-components로 작성된 스타일 코드가 파일마다 분산되어 일관성을 유지하기 어려웠다. CSS-in-JS의 런타임 오버헤드도 신경 쓰였다.

Tailwind CSS 2.0이 최근 안정화되면서 팀 내에서 도입 논의가 시작됐고, 신규 프로젝트에 적용해보기로 했다.

설정 과정

npm install tailwindcss@^1.4.0 postcss autoprefixer
npx tailwindcss init

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

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

실제 사용 소감

장점은 명확했다. 디자인 시스템이 자동으로 강제되고, 네이밍 고민이 사라졌다. className="flex items-center gap-4 p-6"처럼 직관적으로 작성할 수 있었다.

단점도 있었다. className이 길어지면 가독성이 떨어졌고, 조건부 스타일링은 여전히 복잡했다. 팀원들의 학습 곡선도 예상보다 길었다.

결론

2주간 사용해본 결과, 작은 컴포넌트와 레이아웃 작업에서는 생산성이 확실히 올랐다. 복잡한 상태 기반 스타일링은 여전히 styled-components와 병행하는 게 나았다. 당분간 하이브리드 방식으로 운영할 예정이다.