Tailwind CSS를 사용하여 동적 미디어 쿼리 설정 구현

Question

내 React JS 애플리케이션에 구성 요소가 있고 변수를 기반으로 모바일 중단점을 설정하고 싶습니다.

<구성요소 크기={'500px'}/>

const 구성요소 = ({크기}) =>
 반품 (
   <div md:flex>안녕하세요</div>
)
}

[size]:flex와 같은 항목을 추가하고 싶습니다. 여기서 md:flex는 해당 속성을 기반으로 중단점을 설정합니다. (예: 크기가 500px, 100px 또는 900px인 경우 flex를 표시하도록 설정하세요.)

질문: 위에서 설명한 방식으로 미디어 쿼리를 설정할 수 있나요?

Answer 1

classnames npm 패키지를 사용할 수 있습니다:

으아악