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

간단 소개

카카오페이지 FE개발그룹의 Tailwind CSS 도입 및 활용 사례 분석: 도입 배경, Twin.Macro 활용, 커스텀 플러그인, 다해상도/컬러모드 지원, IntelliSense 경험.

AI Summary

Tailwind CSS 도입 배경
- 카카오페이지 웹 개편 시 디자인 시스템 구축의 필요성 증대
- Emotion CSS의 한계: 디자인 시스템 코드와 기능 코드의 의존성 심화, 컴포넌트 가독성 저하
- Tailwind CSS는 디자인 시스템 네이밍 활용에 용이하고, 유틸리티 기반으로 가독성을 유지하며 코드 파편화를 방지
Tailwind CSS 활용 및 Twin.Macro
- Twin.Macro를 통해 Tailwind CSS와 Emotion CSS를 유연하게 결합, 가변적인 스타일 처리를 용이하게 함
- 커스텀 플러그인을 활용하여 재사용 가능한 유틸리티 생성 (예: 스크롤바 숨김)
- 다해상도 대응을 위해 breakpoint를 정의하고, pxr 단위를 도입하여 디자인 px 값을 rem으로 치환, 접근성 향상
- 컬러 모드 지원을 위해 OS 다크 모드 외에 class 기반 제어 기능 활용
IntelliSense 및 결론
- VSCode에서 Tailwind CSS 및 Twin.Macro IntelliSense를 통해 개발 생산성 향상
- Tailwind CSS는 디자인 시스템 구축에 유용하며, 상황에 맞는 CSS 라이브러리 선택이 중요