Tailwind CSS 에서 동적으로 스타일 할당하기

문제 상황

 

위의 사진에 적힌 타이틀을 컴포넌트로 사용해서 여러 페이지에 쓰려고 한다.

interface ITitle {
  title: string;
  color: string;
}

const Title = ({ title, color }: ITitle) => {
  return <h1 className={`text-center text-7xl text-${color}-500 my-3 font-extrabold`}>{title}</h1>;
};

export default Title;

 

이렇게 동적으로 props 내려서 color 설정해야지 ~ 했는데 웬걸 적용이 안된다.

 

props가 안들어오나? 그건 또 아니다. 개발자 도구로 확인해보면 스타일이 들어온걸 확인할 수 있다.

 

흠.......뭘까

알아보기

tailwind dynamic classname 라는 키워드로 구글에 검색

알고보니 테일윈드 공식문서에도 나와있는 내용이였다.

https://tailwindcss.com/docs/content-configuration

Content Configuration - Tailwind CSS

 

일반적으로 템플릿 리터럴 내에서 변수를 사용해 동적으로 클래스를 생성하면 Tailwind CSS가 해당 클래스를 파악하지 못한다. 스타일로 컴파일되는 시점에서 코드를 지워버린다. Tailwind CSS가 클래스를 파악하려면 빌드 시에 정확한 클래스 이름이 존재해야 한다. 

 

한줄로 얘기하면 완전한 클래스 네임일때만 생성 가능하다는 것이다.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
//이건 안되고
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
//이건 된다

 

text-red-600을 적용하고 싶다면 두번째 예시와 같이 완전한 클래스 네임이 필요하다.

 

해결

만약 여러가지 케이스로 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>
  )
}