twmerge
-
[tailwind] tailwind-merge를 사용하여 class 충돌 피하기HTML & CSS 2024. 5. 13. 21:28
리액트에서 tailwindCSS를 사용하면서 컴포넌트의 스타일을 일부만 변경하려 할 때종종 class가 중복돼서 예상하지 않은 스타일로 적용될 때가 있습니다. 이럴 때 중복을 피하기 위해 유용하게 사용할 수 있는 tailwind-merge라는 유용한 라이브러리가 있습니다.| twMergetwMerge를 사용하여 중복되는 class를 제거하고 새로운 스타일을 적용해 줄 수 있습니다. 먼저 예시로 props로 변경하고자 하는 스타일을 받아 적용하는 컴포넌트 하나를 만들어 보겠습니다.interface Props { className: string;}const Input = ({ className }: Props) => { const inputStyle = `border rounded px-2 py-1 $..