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

🤦‍♂️ 문제상황 tailwind 사용중, class를 변수로 넣었는데 class는 정상적으로 render되었지만, css가 적용되지 않았다. isUser 에 따라 top값이 다르게 계산되어 출력되길 원함 ✅ 해결 기본적으로 Tailwind는 화면에서 사용한다고 인식되는 class의 css를 랜더한다. 이것이 tailwind의 tree-shaking기능이다. (관련링크) 즉, Tailwind는 top-[117px]을 인식하지 못했다는 의미 다이나믹 class를 Tailwind가 올바르게 인식하게 하기 위해선 몇가지 규칙을 지켜야 한다. (관련 링크) 1. class명을 온전히 리턴값으로 가져야 한다. ❌ 문자열 연결을 통해 클래스를 만들지 않는다. ✅ 완전한 클래스 이름을 동적으로 만든다. 2. 임의 값..