[tailwindcss] 조건부 스타일 지정, props로 스타일 지정하기

프로젝트를 진행할 때, props에 따라 스타일을 다르게 적용하고 싶은데 제대로 스타일 적용이 안돼서 tailwindcss 공식문서를 보다가 발견한 내용을 정리한다.

 

tailwind가 클래스명을 스타일로 변환하는 방법 중 가장 중요한 점은 끊어지지 않는 완전한 문자열로 존재하는 클래스만 찾는다는 것이다.

 

즉, 문자열 interpolation이나 부분 문자열을 사용하는 경우 제대로 동작하지 않는다.

 

조건부로 스타일 지정하기

개발자도구로 element를 확인해보면 클래스명은 정상적으로 들어간다.
하지만 tailwind에서 해당 클래스명을 스타일로 변환해주지 않는다.

❌ 동작하지 않는 경우

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

끊어지지 않는 완전한 문자열로 존재하지 않기 때문에 tailwind는 해당 클래스를 생성하지 않는다.

 

✅ 동작하는 경우

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

'text-red-600', 'text-green-600'과 같이 완전한 문자열로 존재해야 동작한다.

 

props로 클래스명 추가하기

❌ 동작하지 않는 경우

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

 

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>
  )
}

props에 따라 스타일을 변경하고 싶은 경우, 객체에 미리 클래스명을 정의해놓고 사용하는 방법이 있다.

props로 받은 color에 따라 배경색을 정의할 수 있다.