TIL 8/23 tailwindCSS 동적 스타일링

tailwindCSS를 사용하던 도중 Props로 받아온 데이터들로 수치를 지정해 className을 부여했지만

 

실제 HTML 요소에 반영이 되지 않는 문제가 발생했다.

 

그래서 Tailwind CSS의 작동 방식을 찾아보니

 

정규표현식을 통해 HTML상에서 class일 수 있는 모든 단어들을 가져온 뒤 해당 단어가 TailwindCSS에서 인식되면 그걸 CSS로 변환하는 방법으로 작동한다.

 

즉 class에 작성된 내용을 코드적으로 분석하거나 파싱하는 게 아니고 단어를 있는 그대로 이해하고 적용된다는 의미다.

 

<div class={`text-${error ? "red" : "green"}-600`}></div>

 

그래서 이런식으로 class명 내에서 조건문을 사용하게 되면 Tailwind CSS는 이를 인식하지 못하고 건너뛰어버린다.

 

그래서 tailWindCSS로 동적 스타일링을 하기 위해선 변수와 함수를 이용하던가

 

className 속성 안에서 조건문을 사용해  완전한 text형식의 class명을 넣어줘야 한다.