💥 Tailwind css, Props 동적 클래스 이름

[Dolphin-PC]

📌 배경

• 상품 이미지 캐러셀의 height를 동적으로 관리하고 싶어, props로 height:number 값을 받도록 했다.

  <img ... className={cn("p-1 object-contain", `h-[${height}px] ${width ? `w-[${width}px]` : "w-full"}`)} />

• 하지만, 이렇게 하고나니 동작이 잘 되지 않았다.
• 코드를 수정해서 h-[${height}px] -> h-[200px]로 하니, 또 잘된다.

그 이후에, 다시 값을 h-[200px] -> h-[${height}px] 로 바꿔주니 또 잘된다. ⁉️

📌 해결

• Tailwind 문서를 확인해보니, 동적 클래스 이름을 사용하지 말라고 한다.

결국, 완전하지 못한 classname은 tailwind에서 파싱처리가 되지 않아, 해당 CSS를 생성하지 않게 되어 발생한 문제라고 할 수 있다.

• 이를 해결하기 위해서는, 아래와 같이 동적인 이름이 아닌 완전한 클래스 이름을 사용해야 한다.