[tailwindcss] 동적으로 클래스 이름 삽입하기

const labelClasses = [
  "blue",
  "indigo",
  "gray",
  "green",
  "red",
  "purple",
];

//..
<div className="flex gap-x-2">
  {labelClasses.map((labelClass, index) => (
    <span
      key={index}
      onClick={() => setSelectedLabel(labelClass)}
      className={`w-6 h-6 bg-${labelClass}-500 rounded-full flex items-center justify-center cursor-pointer`}
    >
      {selectedLabel === labelClass && (
        <span className="material-symbols-rounded text-white text-sm">
          check
        </span>
      )}
    </span>
  ))}
</div>

위 코드처럼 동적으로 클래스 이름을 만들 때 문자열을 조각내면 tailwind가 클래스 이름을 찾지 못한다.

 

완전한 이름으로 넣어주도록 하자.

const labelClasses = [
  "bg-blue-500",
  "bg-indigo-500",
  "bg-gray-500",
  "bg-green-500",
  "bg-red-500",
  "bg-purple-500",
];

//..
<div className="flex gap-x-2">
  {labelClasses.map((labelClass, index) => (
    <span
      key={index}
      onClick={() => setSelectedLabel(labelClass)}
      className={`w-6 h-6 ${labelClass} rounded-full flex items-center justify-center cursor-pointer`}
    >
      {selectedLabel === labelClass && (
        <span className="material-symbols-rounded text-white text-sm">
          check
        </span>
      )}
    </span>
  ))}
</div>

그래야 잘 나온다