One post tagged with "tailwind"

Tailwind의 문제점​

컴포넌트의 유연함을 위해 className을 다음처럼 optional하게 받아오는 경우가 정말 많다.

const Button = ({ text, className }: { text: string; className?: string }) => (
  <button className={`${className} flex items-center justify-center`}>
    {text}
  </button>
);

하지만 className이 undefined이면 개발자 도구에서 class="undefined"로 포함된다는 것을 알게 되었다.
이를 해결하기 위해 일반적으로 cn이라는 유틸 함수를 만들어 쓰는 것으로 보인다.