Tailwind css에서 템플릿 리터럴로 스타일 주기

문제 상황

이번 프로젝트를 하면서 위 사진과 같은 화면을 구현을 했어야 했다. Feature, Changed 등 Type 마다 색을 다르게 지정했어야 했다.

코드는 map 함수로 돌아가고 있고, tailwind.json에 사용해야 하는 색들은 모두 지정되어 있었다.

<span className={`bg-${ary.type}`}>
	{arry.type}
</span>

따라서 나는 이렇게 코드를 줘서 배경색을 지정하려고 했다. 하지만 이 코드는 적용되지 않았다..!

코드가 문제가 있나 싶어서, 개발자 도구에서도 봤었지만 class는 잘 적용됐다.

해결 방법

나는 도저히 이해가 안 되가지고 구글링을 하였다. 

https://forsaken.tistory.com/entry/tailwind-template-literal-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9

tailwind template literal 사용 시 스타일 적용

그러던 도중 위 블로그 글을 읽었다. 

내용을 좀 인용하자면, Tailwind 공식 문서에서는 Dynamix class name을 지정할 때 항상 완전한 클래스 이름으로 설정해야 한다고 한다.

 

따라서 나는 미리 recoil의 atom에 이렇게 색을 지정했고

 

const bgColor = useReocilState(typeBgColors);

...

<span className={`bg-${bgColor[ary.type]}`}>
	{arry.type}
</span>

이런 식으로 바꿔서 사용하니까 색이 잘 적용되었다!

 

해결 방법은 생각보다 간단했지만 처음에는 왜 적용이 안될까에 대해서 많이 생각을 했던 문제였다. 다시 한번 위 블로그 글을 쓰신 분께 감사의 표시를 전한다!