라이브러리난이도 어려움⏱ 컴포넌트 단위(수일~수주)
styled-components에서 Tailwind CSS로 마이그레이션
styled-components→Tailwind CSS
요약: CSS-in-JS 런타임을 빼고 유틸리티 클래스로 스타일링해 런타임 비용·SSR 복잡도를 줄입니다. 공존시키며 컴포넌트 단위로 점진 전환하는 것이 안전합니다.
왜 옮기나
- styled-components는 런타임에 스타일을 주입해 비용과 SSR 설정 복잡도가 있습니다.
- Tailwind는 빌드 타임에 CSS를 생성해 런타임 오버헤드가 없습니다.
- 디자인 토큰(간격·색)을 클래스로 일관 적용하기 쉽습니다.
전제 — 현재 상태
styled-components, styled.div`...`, ThemeProvider, props 기반 동적 스타일.
마이그레이션 단계
1
Tailwind 설치·설정
Tailwind를 설치하고 콘텐츠 경로·테마를 설정합니다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p2
공존 시작
전역 CSS에 Tailwind 지시문을 추가하고, styled-components와 공존시키며 컴포넌트별로 전환합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;3
styled를 className으로
styled.div 스타일을 해당 유틸리티 클래스로 옮깁니다. 동적 스타일은 조건부 클래스(clsx 등)로 표현합니다.
// before: const Box = styled.div`padding:16px;color:red`
<div className="p-4 text-red-500">...4
theme 토큰 이전
ThemeProvider의 색·간격을 tailwind.config의 theme.extend로 옮깁니다.
⚠️ 막히는 케이스 · 함정
- 복잡한 동적 스타일(런타임 계산값)은 유틸리티로 표현이 어려워 style 속성이나 CSS 변수를 병행해야 합니다.
- 한 번에 다 바꾸지 말고 공존시키며 컴포넌트 단위로 — 디자인 회귀를 막기 위해 시각 비교가 필요합니다.
- Tailwind는 클래스 나열이 길어질 수 있어 공통 패턴은 @apply나 컴포넌트로 추출하세요.
✅ 검증: 전환한 화면의 시각적 결과가 기존과 동일한지(스크린샷 비교 권장), 번들에서 CSS-in-JS 런타임이 빠졌는지 확인합니다.
Tailwind CSSstyled-componentsCSS-in-JS스타일링마이그레이션