문제 정의

<div className={twMerge("bg-[#333] bg-opacity-[20%]")}>dd</div>

bg와 bg-opacity는 같은 속성이 아닌데, 하나로 합쳐진다.

사실 수집

스타일에는 두 속성이 모두 존재한다. 왜냐하면, TailwindCSS은 컴파일 과정에서 미리 스타일을 변환하기 때문이다. (JIT로 인해 수정 후 저장 시에도 즉시 적용이 된다)

원인 추론

twMerge코드를 살펴보자.

mergeClassList.ts에서 주어진 class들을 합친다.

테스트

클론 후 테스트를 해보았다.

// twMerge.test.ts
expect(twMerge('bg-[#333] bg-opacity-[20%]')).toBe('bg-[#333] bg-opacity-[20%]')

역시 fail이다.