dynamic rendering

[Tailwind CSS] Dynamic rendering 시 스타일 적용 안되는 현상 해결 방법

Tailwind CSS에서 스타일을 적용하는 방식 Tailwind CSS를 사용할 때, state나 props를 통해 클래스를 지정하면 스타일이 적용이 안되는 경우가 있다. Tailwind CSS는 스타일을 적용하기 위해 먼저 코드를 전부 스캔한 후, 코드에서 사용된 스타일을 모아둔 CSS 파일을 만드는데, state같은 가변 데이터는 CSS 파일에 포함되지 않기 때문에 스타일이 적용이 안되는 것이라고 한다. ❌ 가변 데이터 사용 시 export default function page() { // 1~6 랜덤 숫자 const randomNum = Math.floor(Math.random() * 7); // 배경색 프리셋 1~6 중에 랜덤으로 나옴 return } ✅ 정적으로 사용 시 export defa..

taedonn