[tailwind css] 동적으로 클래스 할당하는 법

문제 상황

---

클릭할 때마다 progress바의 progress의 width가 20%씩 증가되는 UI를 구현하고 싶었다.

결과화면

 

그래서 처음에 구현했던 코드는 아래와 같다. 여기서 key는 0 ~ 4(스킬의 개수)까지의 값이다.

아무튼 이렇게 동적으로 width가 계산되어 tailwindcss가 정상적으로 적용이 된다고 생각했지만 그게 아니였다.

progress가 60%인 경우에는 적용이 됐다 안됐다 하는 문제가 있었다..

<div
  className={`h-[100%] w-[${((progress[key] ?? 1) / 5) * 100}%] 
  text-center text-[15px] bg-yellow ease-linear duration-100 cursor-pointer`}
>
  클릭
</div>

 

728x90

해결 방법

---

1. 문제를 구글링해보니 tailwind css에서 동적으로 값을 할당할 때 생기는 문제였고, 나와 비슷한 문제를 겪은 분이 있었다.

• Next.js and Tailwind can't use template string for applying classes problem

나처럼 화가 많이 나셨다 ㅋㅋㅋ…

 

 

2. 정리하자면 이와 같다. tailwind css는 소스 파일에서 끊어지지 않은 완전한 문자열로 존재하는 클래스만 찾는다. 부분 클래스 이름을 함께 연결하거나 문자열 보간을 사용하는 경우 tailwind는 이를 찾지 않고 제거한다. 공식문서에서도 동적 클래스는 사용하지 말라고 경고하고 있다.

반응형

3. 그럼 동적으로 값을 받아 width를 적용하고 싶다면 어떻게 해야할까? 공식문서에서 그 답을 찾을 수 있었다. 공식문서에서 제공해주는 예제를 확인해보면 객체를 생성한 뒤 원하는 키와 그 값에 css를 작성하고, 해당 키를 사용하는 것이였다. 아래 코드처럼 말이다. 그럼 모든 css가 제거되지 않고 원하는 방식대로 적용되는 것을 확인할 수 있다.

type widthType = Record<number, string>;
  const width: widthType = {
    1: 'w-[20%]',
    2: 'w-[40%]',
    3: 'w-[60%]',
    4: 'w-[80%]',
    5: 'w-[100%]',
  };

return (
  <>
    {skillList.map((skill, key: number) => (
      <div key={key} className="max-h-[72%] pl-[1%]">
	        ...
          <div
            role="none"
            onClick={() => progressCount(key)}
            className="flex w-[100%] items-center bg-deepGray"
          >
            <div
              className={`h-[100%] ${width[skill.progress]} text-center 
              text-[15px] bg-yellow ease-linear duration-100 cursor-pointer`}
            >
              클릭
            </div>
          </div>
        </div>
				...
      </div>
    ))}
  </>
);

 

 

참고 자료

---

• Tailwind CSS 에서 동적으로 클래스 할당하기
• [Tailwind CSS] Tailwind CSS의 작동 방식과 동적 스타일링 작성 방법 - (2)