tailwind merge 라이브러리 도입에 대해

[chasj0326]

https://www.npmjs.com/package/tailwind-merge

공통 컴포넌트에서 스타일 커스텀이 가능하도록 할 때, className 을 받아서 적용하는 형식으로 구현했었습니다!
근데 여기서, 테일윈드 스타일이 겹치게 입력될 경우 둘다 반영이 안되거나 하나만 되거나.. 이런식으로 충돌나는 현상이 있었어요.
이런 부분을 해결하는 라이브러리를 발견해서 공유합니다!

근데 이미 컴포넌트가 어느정도 사용되고 있는 상황이라, 이 라이브러리의 필요성에 대해 물어보고자 글을 게시합니다!

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

[bbearcookie]

오호! className 문자열 상에서 뒷 부분에 작성했어도 앞에서 적용된 스타일의 CSS 우선순위가 높다면 간혹 적용이 되지 않는 경우가 있었는데, 이런 문제를 해결해주는 라이브러리군요!

전 도입하기에 좋다고 생각합니다 😊👍
다만, 저희가 tailwind.config.js 에서 확장한 스타일이나 버튼처럼 @apply 로 확장한 스타일에 적용하는 것에 문제는 없을까요??
이 아티클에서는 extendTailwindMerge 함수를 사용하는 것에 대해서 이야기하고 있기는 한데, 자세하게 실행은 해본 것은 아니어서 확신은 없어서요!!