[TailwindCSS] Tailwind에서 동적 스타일링 하기

개요

Tailwind를 사용하던 중 아래와 같이 여러개의 카드 컴포넌트에 각각 다른 flex-basis를 줘야하는 일이 생겼다.

 

결론 : 객체 만들어 활용하기

나는 많은 속성을 주는 것이 아니였기 때문에 className 전체를 객체화 시켜서 활용하였다.

const flexRow: IFlexRow = {
  0: "h-auto w-auto",
  0.2: "h-auto w-auto basis-1/5 ",
  0.5: "h-auto w-auto basis-1/2 ",
  0.8: "h-auto w-auto basis-4/5 ",
};

후에 props로 객체의 key 값을 받아 객체를 할당하였다.

export default function Card({ title, children, basis }: ICard) {
  return (
    <div className={flexRow[basis ? basis : 0]}>
	...
    </div>
  );
}

 

여러개의 동적 속성 값이 요구되는 경우

나는 하나의 동적 값만 필요했기 때문에 전체를 다 묶어서 객체화시켰지만

여러개의 동적 값이 필요하고 경우의 수가 다양한 경우에는 속성 하나하나를 객체로 컴포넌트화시켜서 사용하는 것이 더 편리할 것 같다.

 

예)

const colors: any = {
  red: "text-red-600",
  black: "text-black",
};

const textSizes = {
  sm: "text-sm",
  md: "text-md",
  lg: "text-lg",
};

<div className={`${colors["red"]} ${textSizes["sm"]}`}></div>

 

---

참고 : https://moon-ga.github.io/tailwind_css/2-dynamic-classnames/