웹

Tailwind CSS를 사용해서 동적으로 스타일링 하기

개요 이번 프로젝트에서 드래그앤드랍 기능을 구현하기위해 간단한 실습을 하던 중 동적으로 스타일을 추가하는 부분에서 문제가 생겼다. 드래그앤드랍 기능을 구현하기 위해서는 드롭 시점에 뷰포트 안에서 드래그한 요소의 상대적인 위치를 계산해서 position 속성의 값으로 추가해줘야 하는데 동적으로 생성한 클래스가 tailwind css에서는 적용되지 않았기 때문이다. 다음은 동적으로 CSS 클래스를 추가했던 코드이다. const onDrop = (event: React.DragEvent) => { event.preventDefault() const data = event.dataTransfer.getData('text/plain') const { id, offsetX, offsetY } = JSON.parse..