[Tailwind] 동적 클래스 할당하기 (+Typescript, Styled-components)

🤔 문제 상황

Typescript 환경에서 Tailwind와 styled-components를 함께 사용하는
tailwind-styled-components를 사용하던 중,
공통적으로 사용되는 컴포넌트의 스타일을 prop로 받아서 적용하고 싶었다.
즉, 동적으로 클래스를 할당하려고 한 것이다.
셋을 함께 사용하면서 작성하는 과정이 꽤나 까다로웠기에 기록해본다.

✅ 해결방법

tailwind와 동적 클래스

Tailwind의 공식 문서는 동적 클래스 사용을 지양하라고 써있다.
정규표현식을 통해 단어의 있는 그대로를 가져와서 클래스로 적용하기 때문에
코드적으로 분석이 필요한 부분은 건너뛰어버리기 때문이다.
그래서 아예 동적 클래스를 못 쓰느냐? 그건 아니다.
중요한 것은 '완전한 상태의 단어'로 넣어주는 것이다.

그래서 어떻게 하는데?

interface ContainerProps {
  length: string;
}

// 해당 Container의 width를 props로 받고 싶다면? ex) w-[8rem]
const Title: React.FC<titleProps> = ({ length }) => {
  return (
    <>
      <Container length={length} />
    </>
  );
};

// Good (props.length로 아예 'w-[8rem]'를 넘겨줌)
const Container = tw.div<ContainerProps>`
  bg-blue-500 h-2 mb-10 ${(props) => props.length}
`;

// bad (props.length로 8 같이 숫자를 넘김)
const Container = tw.div<ContainerProps>`
  bg-blue-500 h-2 mb-10 w-[${(props) => props.length}rem]
`;

// bad (props.length로 8 같이 숫자를 넘김 /이건 적용이 됐다 안됐다 함)
const Container = tw.div<ContainerProps>`
  bg-blue-500 h-2 mb-10 ${(props) => `w-[${props.length}rem]`}}
`;

bad 예시처럼 동적 클래스를 조합해서 쓰면 안되고, 통째로 넣겨줘야한다.

---

참고

[Tailwind CSS] Tailwind CSS의 작동 방식과 동적 스타일링 작성 방법 - (2)