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

간단 소개

FE 개발 그룹의 Tailwind CSS 도입 및 활용 사례, Twin.Macro 라이브러리 연동, 커스텀 플러그인, 다해상도 대응, 컬러 모드 지원 등 다양한 활용 팁을 제공합니다.

AI Summary

Tailwind CSS 도입 배경
- 기존 Emotion CSS 사용 방식의 문제점: 공통 컴포넌트 인식 부재, 네이밍 관리의 어려움, 디자인 시스템과의 통합 시 기능 코드 침범.
- 디자인 시스템 구축을 통해 문제 해결 시도, Tailwind CSS가 디자인 시스템 네이밍을 코드에 반영하고, 컴포넌트 가독성을 유지하는 데 적합하다고 판단.
Tailwind CSS 활용 및 Twin.Macro
- Twin.Macro 라이브러리를 통해 Tailwind CSS의 유연성 확보: 가변적인 스타일 적용, Emotion CSS와의 통합 활용.
- 커스텀 플러그인 추가: 스크롤바 숨김 등 자주 사용되는 복잡한 스타일을 유틸리티로 정의하여 코드 간결성 유지.
- 다해상도 대응: 자체적인 중단점 정의를 통해 다양한 해상도에 유연하게 대응.
추가 기능 및 결론
- pxr 단위 도입: 디자인 시 px 단위를 사용하되, 실제 웹 페이지에는 rem 단위로 적용하여 접근성 향상.
- 컬러 모드 지원: OS 다크 모드 지원 및 사용자 정의 다크 모드 토글 기능 구현.
- VSCode IntelliSense 지원: 자동 완성 및 상세 설명 제공으로 개발 생산성 향상. 라이브러리 선택은 상황에 따라 다르며, Tailwind CSS는 도입을 고려할 가치가 충분함.