tailwind 변수 값 적용

useState의 상태 값이 css에 적용 해야 될 때가 있다.

문제는 tailwind에서 “ w-[${width}px] “ 이런 식으로 지정하면 class는 정상적으로 render되었지만, css가 적용되지 않는다.

이러한 경우 **style(인라인 스타일)**을 이용해야 한다.

한 개 이상의 스타일을 지정해야 할 경우 { } 안에 다 적용하면 된다.

style(인라인 스타일)

export default function Item() {
		const [imageSize, setImageSize] = useState({ width: 100, height: 100 });
		const containerStyle = {
	     height: imageSize.height
	     width: imageSize.width,
	   };
	   return (
        <div style={containerStyle}>containerStyle</div>
    );
}

 

그 외 방법

자바스크립트의 josin 함수를 활용여 스타일을 동적으로 적용할 수 있다.

 

export function cls(...classnames) {
  return classnames.join(' ');
}

 

아래 예시 코드는 모바일 환경 여부에 따라 알맞은 높이값이 적용된다.

export default function AnnouncContent(props) {
  //...
  const textareaHeight = isMobileDevice ? 'h-[calc(100%-32px)]' : 'h-[calc(100%-3.06vmin)]';

  return (
     <div className={cls('scriptTxt', textareaHeight)}>{!compareScriptToggle ? normalTxtArea() : modifyTxtArea()}</div>
  );
}

 

 

참고

https://hoyashu.tistory.com/311