Tailwind의 활용성을 높여주는 function 사용하기

Tailwind CSS를 활용하여 Next를 개발하던 도중 다음과 같은 코드가 만들어졌다.

      <h1
        className={
          isBlack
            ? "cursor-pointer bg-white text-black px-4 py-2 rounded-xl"
            : "cursor-pointer"
        }
      >
        {Text}
      </h1>

isBlack의 true/false 여부에 따라 css가 다르게 적용하는 코드이다.

그런데 두 가지 버전의 css에 공통된 부분이 존재한다.

이러한 공통된 부분은 한 번만 적으면서 조건문에 따라 일정 부분만 css가 다르게 적용시킬 순 없을까?

다음과 같은 function을 만들어서 사용하면 이것을 해결할 수 있다!

<utils.ts>
export const cls = (...classnames: string[]) => {
  return classnames.join(" ");
};
//모든 props를 배열로 받아서, string으로 바꾸기

  <h1
    className={cls(
      "cursor-pointer",
      isBlack ? "bg-white text-black px-4 py-2 rounded-xl" : ""
    )}
  >
    {Text}
  </h1>

👍