この記事では、Tailwind の「クリア」ユーティリティにブレークポイントとメディア クエリを適用する方法を例示します。
Tailwind の「clear」でブレークポイントとメディア クエリを利用する方法は?
Tailwind の「クリア」ユーティリティに特定のブレークポイントとメディア クエリを適用するには、HTML 構造を作成します。次に、目的の値を「」に定義します。 クリア-<値> 」ユーティリティを使用してさまざまな画面サイズに対応 MD ' または ' LG ” ブレークポイント。最後に検証用Webページの画面サイズを変更します。
例
この例では、「」を使用します。 MD ” を使用したブレークポイント 両方クリア 「ユーティリティ」と「 LG ” を使用したブレークポイント クリアなし 「」のユーティリティ 」要素を使用して、中および大の画面サイズで位置を変更します。
< 体 >
< ディビジョン クラス = 「h-96 mx-10 p-8 bg-sky-500」 >
< 画像 送信元 = 'tailwindcss_img.png' クラス = 「float-left p-3 w-28 h-24」 すべて = '画像' / >
< 画像 送信元 = 'tailwindcss_img.png' クラス = 「フロート右 p-3」 すべて = '画像' / >
< p クラス = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS は、要素の周りのコンテンツのラッピングを制御する「floats」ユーティリティを提供します。
この例では、Tailwind の「clear」ユーティリティでブレークポイントとメディア クエリを使用する方法を示します。 < / p >
< / ディビジョン >
< / 体 >
ここ：
- 「フロート左」 クラスは要素をコンテナの左側にフローティングします。
- 「フロート右」 クラスは要素をコンテナの右側にフローティングします。
- 「明確な左」 クラスは、
要素をコンテナ内の左にあるフローティング要素の下に移動します。
- 「md:clear-both」 クラスは、左右のフロートの両方をクリアし、中程度の画面サイズでその下に
要素を配置します。
- 「lg:クリアなし」 クラスは
要素に適用されたクリアを無効にし、大きな画面サイズで要素をコンテナの両側にフローティングできるようにします。
出力
上記の出力によると、指定されたブレークポイントとメディア クエリは「clear」ユーティリティに正常に適用されました。
結論
Tailwind の「クリア」ユーティリティにブレークポイントとメディア クエリを適用するには、希望の値を「」に定義します。 クリア-<値> 」ユーティリティを利用して、さまざまな画面サイズに対応します。 MD ' または ' LG ” ブレークポイント。確認のために、Web ページの画面サイズを変更し、変更を確認します。この記事では、Tailwind の「クリア」ユーティリティに特定のブレークポイントとメディア クエリを適用する例を示しました。