[React/Tailwind] 🌲 tailwind 변수 className로 css적용 안될 때 / 다이나믹 값 (tailwind 트리쉐이킹)

🤦‍♂️ 문제상황

tailwind 사용중, class를 변수로 넣었는데 class는 정상적으로 render되었지만, css가 적용되지 않았다.

   <aside
      className={`${
        isUser ? `top-[${paddingTop + headerHeight}px]` : `top-[${paddingTop}px]`
      } sticky col-span-2 h-fit w-[180px]`}
    >
    </aside>

isUser 에 따라 top값이 다르게 계산되어 출력되길 원함

 

html에 class top-[117px]이 있지만 css는 적용되지 않음

 

✅ 해결

쉐이키 쉐이키

기본적으로 Tailwind는 화면에서 사용한다고 인식되는 class의 css를 랜더한다. 이것이 tailwind의 tree-shaking기능이다. (관련링크)

즉, Tailwind는 top-[117px]을 인식하지 못했다는 의미

 

다이나믹 class를 Tailwind가 올바르게 인식하게 하기 위해선 몇가지 규칙을 지켜야 한다. (관련 링크)

 

1. class명을 온전히 리턴값으로 가져야 한다.

❌  문자열 연결을 통해 클래스를 만들지 않는다.

<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>

 

✅ 완전한 클래스 이름을 동적으로 만든다.

<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>

 

2. 임의 값은 동적 값에서 계산할 수 없다.

❌  임의의 값을 동적으로 추가하지 않는다.

<div class="bg-[{{ userThemeColor }}]"></div>

 

✅ 이러한 경우 stlye(인라인 스타일)을 이용한다.

 

<div style="background-color: {{ userThemeColor }}"></div>

 

---

내가 겪었던 상황은 2번이었고, 아래와 같이 해결했다.

 ...
 const quickBarTopStyle = useMemo(() => {
    const paddingTop = STYLE_ENUM.REPORT_DETAIL_BODY_PADDING_TOP;
    const headerHeight = STYLE_ENUM.REPORT_DETAIL_HEADER_HEIGHT;
    return isUser ? { top: paddingTop + headerHeight } : { top: paddingTop };
  }, [isUser]);
  
   return (
    <aside style={quickBarTopStyle} className={`sticky col-span-2 h-fit w-[180px]`}>
    ...

style인라인에 동적 값을 넣었다.

객체는 화면 랜더시 다르다고 인식하기에 useMemo에 담았다.

이렇게 하니까 잘된다! 해결-!