핵심 요약
크리에이트립은 styled-components에서 Tailwind CSS로 안전하게 대규모 마이그레이션을 진행하고 CSS Cascade Layers로 우선순위를 명시적으로 제어했습니다.
구현 방법
- 레이어 선언(@layer theme/base/components/utilities)과 head에 순서 고정
- Ant Design CSS-in-JS 레이어 활성화로 우선순위 관리
- styled-components 스타일을 components 레이어로 래핑하고 SSR/CSR에 맞춘 처리
주요 결과
- 어드민 앱 100% 마이그레이션 달성, 유저웹도 상당 부분 진행
- Tailwind 유틸리티를 항상 우선 적용하도록 구조를 설계해 충돌 방지
