tailwind 중복 클래스 오류

문제 상황
tailwind css 에서 "text-h1 text-primary-color"와 같이 커스텀 해서 속성을 사용하면, 실질적으로 브라우저에는 "text-h1"만 나타나 적용되는 현상이 있다.

이해
위 문제는 tailwind와 같이 사용한 twmerge의 중복제거의 한계 때문에 생긴 문제였다. 검색을 통하여 이런 이슈가 이미 여러 사람들에게도 나타나고 있는 모양이다.
https://stackoverflow.com/questions/76355485/tailwind-merge-not-able-to-combine-color-and-typography-classes

해결
stackoverflow에서 twmerge 개발자의 답변으로 "공식 문서의 예시를 참고하여 커스텀을 추가"하거나, "상수로 관리해서 tailwind에서 정의한 기본 속성 활용하기의 두 가지 방법"을 추천했다.
덧붙인 내용으로, 커스텀 하는 법이 어려우므로 기본 레시피를 활용하는 쪽을 더 추천했다.

아래와 같이 상수화 시켜서 스타일을 미리 만들어 놓고 사용하면 해당하는 문제는 일어나지 않았다!

const TYPHOGRAPHY = {
  title: 'text-[14px] font-bold',
  description: 'text-[12px]',
  date: 'text-[10px] text-[#BFBFBF]',
  icon: 'text-[10px]',
}