tailwind merge 커스텀 클래스 오버라이딩 문제 해결

https://xionwcfm.tistory.com/328

cva, tailwindmerge, clsx를 조합하여 재사용 가능한 UI 만들기

이때 다뤘던 라이브러리인데요

간단히 요약하면 테일윈드에는 css 적용 순서이슈가 있습니다.

이는 빌드타임에 모든 css를 정적으로 생성하고 사용하는 테일윈드의 동작 방식에서 기인하는데요

.green-400 {
  color:green
}

.red-400 {
  color:red
}


<div className="red-400 green-400" /> ??

이렇게 똑같은 속성을 서로 다르게 정의하는 클래스 두개를 동시에 적용하는 경우

테일윈드는 어떤 클래스를 적용시킬까요?

우리는 흔히 뒤에 오게되는 클래스가 적용될것이라고 예상하기 쉽습니다.

하지만 실제 동작은 그럴수도 있고 아닐수도 있다는 것이 함정입니다.

 

정답은 tailwindcss가 빌드타임에 생성한 css 파일의 클래스 정의 순서가 뒤쪽인 클래스가 적용된다.

입니다.

css는 캐스케이딩되며 이미 정의된 속성을 재정의 하는것도 얼마든지 허용해주는데에서 이 문제가 기인합니다.

 

그런데 테일윈드로 컴포넌트 기반 스타일링을 하다보면 이미 정의된 클래스를 취소하고

새 클래스를 입력해야하는 경우가 왕왕 있는데요

그럴때마다 랜덤하게 css가 적용되면 불편할것입니다.

tailwind merge는 바로 이러한 페인포인트를 해결하는 라이브러리인데요

 

클래스 정의 순서가 뒷쪽에 있는 클래스의 속성을 적용시키게 해주는 라이브러리입니다.

이를 clsx라는 라이브러리와 조합해 활용하여 흔히 cn 함수라고 부르는 함수를 만들어 사용하곤 하고

저 역시도 이 cn 함수를 개인프로젝트든 실무에서든 매우 애용하는 편이었는데요

cn 함수를 테일윈드와 사용하면서

어느 순간 분명히 테일윈드로 적용해둔 css가 적용되지 않는 이상한 버그를 발견하게 되었습니다.

 

바로 font-size를 담당하는 클래스와 font 색상을 담당하는 클래스를 같이 쓰게되면

하나만 적용이 되는 버그였는데요

 

이게 정말 불편했습니다. 분명 속성을 적용해두었는데 적용이 안되어있으니까요

게다가 매번 발생하는게 아니라 간헐적으로 발생하는것이 정말...

사람을 미치게하는데 우연히 cn함수의 내부에서 사용할때에만 이 현상이 발견하는 것을 확인하게되었습니다.

 

이후 스택오버플로우와 tailwind-merge 의 이슈탭을 살펴보면서

저와 비슷한 현상을 겪고있는 다른 개발자들을 보게되었는데

 

결론적으로 폰트사이즈 / 폰트색상 두가지를 모두 커스텀 테마로 사용하게되면 이 현상이 발생합니다.

tailwind-merge가 tailwind.config.ts에 액세스할 수 없어서 발생하는 문제라고 하는데요

 

저같은경우에는 팀내 디자이너분과 디자인 시스템을 구축하면서

대부분의 css 클래스에 커스텀 속성을 적용해 둔것이 문제가 되었습니다.

<div className=" text-primary-100 text-12"/> // 둘다 tailwindconfig를 통해 커스텀한 토큰

이렇게 테일윈드에서 기본 제공하는 토큰을 사용한게 아니라

둘다 커스텀 토큰을 사용하는 경우에 문제가 발생합니다.

 

해결방법은 간단합니다.

라이브러리 제작자가 제공한 config 함수를 이용하면 됩니다.

 

물론 이 함수에 대한 문서가 전혀 친절하지않아서

대체 뭘 어쩌라는거지? 라고 몇분정도 생각했었습니다만..

import { ClassValue, clsx } from "clsx";
import { extendTailwindMerge, twMerge } from "tailwind-merge";
const text0_30 = Object.fromEntries(Array.from(Array(31)).map((_, i) => [`${i}px`, `${i / 16}rem`]));

export const customTwMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [{ text: Object.keys(text0_30) }],
  },
});

export const cn = (...inputs: ClassValue[]) => {
  return customTwMerge(clsx(...inputs));
};

결론적으로 tailwind-merge에서 제공하는

extendTailwindMerge 함수를 twMerge 대신 사용해주면 됩니다.

 

extendTailwindMerge의 경우에는 위와 같이 매개변수로 config옵션을 전달할 수 있는데요

여기서 커스텀 키값에 대한 선언을 넣어주고 extendTailwindMerge의 반환 함수를 사용하면

문제가 해결됩니다..

classGroups에 들어가야하는 옵션의 경우 공식문서를 참고해보시면 되겠습니다.

사실 저도 그냥 돌아가는거보고 적는거라 font-size말고 다른 건 설정해보지않았습니다. 하하;;

---

마치며

네가 선택한 테일윈드다 악으로 깡으로 버텨라