[tailwind] tailwind 커스텀 폰트 사이즈, 컬러 덮여쓰여지는 문제.. feat. twMerge

현재 진행하는 프로젝트에서는 custom fontsize랑 custom color를 사용하고 있는데,

twMerge에서 계속 색이 입혀지면 글자크기가 안입혀지는 문제가 나타났다.

 

이 문제는 chatgpt도 해결 못해주었다^^

Stack Overflow가 아직 살아있음에 매우 감사하다.

https://stackoverflow.com/questions/78185697/why-custom-tailwind-font-size-is-overwritten-by-text-colour-class

ㄴ 여기 답변에 의해 답을 얻었다.

 

이게 twMerge가 제대로 custom color, fontsize를 제대로 구분못하고 병합하는 문제 때문인데, 

twMerge는 뒤에 나오는 class를 더 우선순위를 둔다.

 

tailwind에서 text색깔을 변경하려면 text-slate500, 

text사이즈를 변경하려면 text-13R 이런식인데,

원래는 둘이 의미하는 바가 다르므로 둘 다 적용해야하는데,

아마 둘다 text-커스텀문구 여서 제대로 구분을 못하고 뒤에 나온 클래스로 덮어쓰는 것같다.

 

방법은 extendTailwindMerge함수를 사용하여 font-size, text-color의 클래스 이름을 명시해주는 것이다.

import clsx, { ClassValue } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';
import fontSize from '@/presets/fontSize';
import colors from '@/presets/colors';

const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': [...Object.keys(fontSize).map((e) => `text-${e}`)],
      'text-color': [...Object.keys(colors).map((e) => `text-${e}`)],
    },
  },
});

const cn = (...input: ClassValue[]) => customTwMerge(clsx(input));

export default cn;

 

이랬더니 아주 잘 구분해서 폰트 색깔, 사이즈 모두 적용되었다. !! ^_^

 

참고로 fontSize, colors는 따로 파일 빼서 tailwind.config에 적용했다.