1. 문제점 파악

1. 현재 tw-merge문제점

: 속성 두 개를 적을 때, 하나의 속성이 뒤의 속성을 완전히 덮어쓰지 못한다.

• 지난 포스팅 : tailwind-merge의 단점을 보완하여 커스텀cn 함수 만들기

예를 들어, 기본적으로 Text컴포넌트의 폰트는 text-sm이라고 하자. 이 때, text-title1이라는 속성으로 이 속성을 오버라이드하려고 한다. 그렇다면 아래와 같이 작성할 것이다.

<div className="text-sm text-title1">안녕하세요</div>

• 결과

  

  

  위와 같이, title1 속성이 뒤에 왔음에도, sm의 속성이 먼저 적용된다. 이에 따라 title1은 sm을 뒤집어 쓰지 못한다.

그렇다면, twMerge를 사용한다면?

<aside> 💡 twMerge?

twMerge

: Tailwind 속성을 충돌 없이 합쳐준다.

• 예시

  <div className={twMerge("p-1" ,"p-2")}>안녕하세요</div>
  

  

  위와 같이 뒤의 p-2이 p-1을 뒤집어 쓴다.

</aside>

하지만, twMerge는 커스텀 속성을 뒤집어 쓰지 못한다.

<div className={twMerge("text-sm" ,"text-title1")}>안녕하세요</div>

그렇다면, clsx나 classNames를 사용한다면?

<aside> 💡 classNames? clsx?

classNames

: className을 조건부로 합칠 때 보다 선언적으로, 간편하게 작성할 수 있게 해주는 JS유틸이다.

• classNames({ 문자열 : 조건 })

  classNames({ 'doo', 'foo':true, 'bar':false }) // 'doo foo'
  

clsx

: classNames와 동일한 기능을 제공한다.

• clsx({ 문자열 : 조건 })

  clsx('foo', true && 'bar', 'baz');
  

</aside>

clsx나 classNames는 단순히

2. 원인 파악

가설 1. 커스텀 속성이라, twMerge에 등록이 안되어 있는 게아닐까?

위에서 <div className="text-sm text-title1">안녕하세요</div> 의 title1은 내가 직접 설정한 타이포그래피이다.

// tailwind.config.js
const config = require('@guesung/tailwind-config/tailwind.config');

module.exports = {
	fontSize : {
		title1: [
	    '4rem',
	    {
	      fontWeight: 'bold',
	    },
	  ],
	  // ..
	}
// ..
};