tailwindcss

tailwind-merge로 클래스 충돌 해결하기

TL;DR tailwind-merge, twin.macro와 같은 NPM 패키지를 활용하면 하나의 요소에 같은 속성을 정의하는 className이 두 개 이상일 경우, 가장 마지막에 위치한 클래스가 최종적으로 적용되게 할 수 있습니다. 문제 상황 저는 요즘 React, TailwindCSS, TypeScript를 이용한 UI 공통 컴포넌트 라이브러리를 만들고 있는데요. BaseButton이라는 기본 Button UI 컴포넌트를 만든 후에 BaseButton 컴포넌트를 사용하는 기본 Chip 컴포넌트를 만들었습니다. 스토리북으로 문서화하기 위해 스토리를 작성하던 중에 예상한 대로 동작하지 않아서 개발자 도구를 함께 열어보고 확인해보았습니다. // BaseChip.tsx interface Props { ch..