FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까?

핵심 내용

• 카카오페이지 웹 개편 과정에서 기존 Emotion CSS의 한계를 보완하기 위해 Tailwind CSS 도입
• 디자인 시스템 네이밍을 코드에 자연스럽게 반영하고, 기능 코드와 디자인 코드를 분리하려는 목적
• Twin.Macro로 Tailwind와 Emotion CSS를 함께 활용하며, 가변값 처리와 우선순위 문제도 완화
• 기본 유틸리티 부족한 부분은 플러그인과 커스텀 유틸리티로 보완하고, 예시로 scrollbar-hide 같은 확장 방식 소개

적용해볼 점

• 공통 컴포넌트와 디자인 토큰을 먼저 정리한 뒤 유틸리티 기반 스타일 전략 검토
• 반복되는 복잡 스타일은 커스텀 플러그인으로 한 줄 유틸리티화하는 방식 고려
• 가변 값이나 예외적 스타일은 Twin.Macro 같은 보조 도구로 유연하게 처리