[CSS, TailwindCSS] tailwindCSS에 동적으로 스타일 적용하기

구현하려는 내용

프로젝트 내에서 사용한 스킬들을 badge 형태로 나타내려고 하였다.

 

전체적인 동작은 다음과 같다.

1. 사용 stack 이름을 파라미터로 받는 StackBadge 컴포넌트가 동작한다.
2. 컴포넌트 내에서는  stack 이름을 getBadgeColor의 인수로 넘겨준다.
3. getBadgeColor 함수의 return 값으로 받은 배경 색을 badge의 background color로 입혀준다.

각각의 코드는 다음과 같다.

// getBadgecolor.js
export const getBadgeColor = (stack) => {
  let backgroundColor = "";
  switch (stack) {
    case "Javascript":
      backgroundColor = "yellow-300";
      break;
    case "React":
      backgroundColor = "cyan-400";
      break;
    default:
      backgroundColor = "gray-200";
      break;
  }
  return backgroundColor;
};

 

// StackBadge
export const StackBadge = ({ stackName }) => {
  const badgeColor = getBadgeColor(stackName);
  return (
    <div className={`bg-${badgeColor} px-2 py-1 text-base rounded-xl`}>
      {stackName}
    </div>
  );
};

 

 

😭문제 상황

 

하지만 문제가 발생하였다. 아래 그림과 같이 background-color가 적용이 되지 않는 것이다. 

 

원래 나의 예상:

 

결과:

 

처음에는 stack 이름에 따른 컬러가 리턴이 잘 되지 않았나..? 리턴 값에 문제가 있나..? 싶어 리턴값으로 오는 background 컬러를 console로 출력해보았다.

 

지정된 배경색이 잘 리턴되었다!! 그럼 무엇이 문제일까..?

하고 찾아보았더니 문제는 tailwindCSS를 이용해 스타일을 적용하는 과정이 문제였다.

 

 

🕵️문제 원인 & 해결 방안

내가 작성했던 것처럼 클래스 이름 생성 시에 문자열에 변수를 연결해서 사용하게 되면 tailwind가 감지를 못한다.

<div className={`bg-${badgeColor} px-2 py-1 text-base rounded-xl`}>

 

이럴 경우에는 변수에 클래스 이름 자체를 넣어주어야한다. 

<div className={`${badgeColor} px-2 py-1 text-base rounded-xl`}>

 

따라서 이에 맞게 getBadgeColor.js 도 클래스 이름 자체가 리턴 되도록 다음과 같이 수정하였다.

 switch (stack) {
    case "Javascript":
      backgroundColor = "bg-yellow-300";
      break;
    case "React":
      backgroundColor = "bg-cyan-400";
      break;
    case "ReactNative":

 

😃결과

 

잘 출력됨을 확인하였다!!

 

tailwindCSS를 이용해 동적으로 스타일을 적용하려할 때는, 변수와 문자열을 연결지어 클래스 이름을 지어주지 말고,

클래스 이름 자체를 변수로 두어 넣어주어야한다는 점을 잊지말자!!