항공 프론트엔드 구축기 (3/10): prefix를 붙이자 tailwind-merge가 조용히 깨졌다
Summary
Tailwind에 Prefix 세 글자 붙였을 뿐인데... 조용히 깨져버린 tailwind-merge 구출기
에러 없이 스타일만 망가지던 지옥의 디버깅에서 tailwind-merge 내부 메커니즘을 파악해 우아하게 해결하는 법
라이브러리 스타일 격리를 위해 Tailwind CSS에 prefix를 도입했다가 tailwind-merge의 병합 기능이 깨지며 발생한 문제를 심도 있게 다룹니다. 기존 1세대의 불안정한 문자열 치환 우회 방식을 극복하고, tailwind-merge가 클래스를 분류하는 원리를 파악하여 직접 제어하는 2세대 해법을 상세한 코드와 함께 공유합니다.
- 01디자인 시스템 격리를 위한 Tailwind prefix 도입과 이로 인한 tailwind-merge의 조용한 실패 원인 규명
- 02기존 1세대 방식(prefix 제거 후 재부착)의 무차별 치환 오류, 잦은 문자열 조작으로 인한 오버헤드 등 한계점 명확화
- 03tailwind-merge의 핵심 설계 모델인 classGroups와 conflictingClassGroups의 역할 분담 이해
- 04접두사는 같으나 CSS 속성이 다른 text-ellipsis, border 등의 예외 케이스를 우선순위 기반으로 올바르게 분기하는 방법 제시
- 05padding(p, px, py)과 rounded 모서리 간의 단방향 충돌 및 상속 관계를 직접 매핑하여 해결한 상세 노하우 공유
RECOMMENDATION
Tailwind 기반의 공용 컴포넌트 라이브러리를 배포하거나, 다중 패키지 환경에서 스타일 오버라이딩 충돌 이슈로 골머리를 앓고 있는 프론트엔드 개발자들에게 정독을 추천합니다.
The Problem
공용 컴포넌트 라이브러리의 스타일 격리를 위해 Tailwind CSS에 prefix('yf-')를 적용했으나, 스타일 덮어쓰기를 처리하는 tailwind-merge가 해당 prefix 클래스를 인식하지 못해 스타일 충돌이 해결되지 않고 어긋나는 문제가 발생했습니다.
The Solution
tailwind-merge의 내부 작동 방식인 classGroups와 conflictingClassGroups 설정을 활용하여 prefix가 적용된 클래스들을 직접 등록하고, text-ellipsis나 padding처럼 속성이 충돌하는 세부 그룹 간의 우선순위를 재정의하였습니다.
The Result
문자열 치환 등의 임시방편 없이 커스텀 유틸리티와 prefix 스타일의 충돌을 완벽하게 해결했으며, 컴포넌트에서는 템플릿 태그를 통해 설정을 신경 쓰지 않고 단순하게 사용할 수 있게 되었습니다.
Trade-off
새로운 Tailwind 유틸리티나 소수점 임의값을 사용할 때마다 수동으로 classGroups를 최신화해야 하는 유지보수 공수가 수반되며, 이를 자동으로 생성할 수 있는 완벽한 해결책은 아직 확보하지 못했습니다.
Key Concepts
More from 여기어때
View all posts from 여기어때EKS 컨테이너 메모리 스파이크 추적기
EKSPage CacheLogback2일 전SRE 업무에 AI 녹여내기 — 2편: Alert Adviser로 장애 원인 분석 자동화
GrafanaMCPSlack Bot6일 전SRE 업무에 AI 녹여내기 — 1편: Smart RI Calc로 인프라 비용 산정 자동화
SREAWS KarpenterCost Estimation6일 전WebFlux 전환 부하 테스트를 다시 쓴 이야기
WebFluxSpring BootLoad Testing1주 전데드락을 해결하려다, 락을 줄이게 된 이야기
MySQL InnoDBDeadlockPessimistic Lock1주 전