tailwind 동적 스타일링 적용

동적 스타일링 적용 규칙

NO : 클래스 이름을 동적으로 구성하지 말 것

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

YES : 완전한 클래스 이름을 사용 할 것

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

문제는 이렇게 되면 상위 컴포넌트에서 props 받아서 동적으로 클래스를 생성하는 데에
어려움이 있으며, 공식문서에서도 이렇게 하지 말라고 명시하고 있음.

NO : 클래스 네임을 동적으로 만들기 위해 props를 이용하지 말 것

function Button({ color, children }) {
  return (
    <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>
      {children}
    </button>
  )
}

YES : 대신, 빌드타임에 정적으로 탐지될 수 있는 클래스 이름을 완성하려면 props를 맵핑할 것

function Button({ color, children }) {
  const colorVariants = {
    blue: 'bg-blue-600 hover:bg-blue-500',
    red: 'bg-red-600 hover:bg-red-500',
  }
  return (
    <button className={`${colorVariants[color]} ...`}>
      {children}
    </button>
  )
}