Tailwind CSS を使用して動的なメディア クエリ設定を実装する

Question

React JS アプリケーションにはコンポーネントがあり、変数に基づいてモバイル ブレークポイントを設定したいと考えています。

<コンポーネント サイズ={'500px'}/>

const コンポーネント = ({サイズ}) => {
 戻る （
   <div md:flex>こんにちは</div>
)
}

[size]:flex のようなものを追加したいのですが、md:flex はそのプロパティに基づいてブレークポイントを設定します。 (例: サイズが 500 ピクセル、100 ピクセル、または 900 ピクセルの場合、フレックスを表示するように設定します)

質問: 上で説明した方法でメディア クエリを設定することは可能ですか?

Answer 1

classnames npm パッケージを使用できます:

リーリー