この記事では、Tailwind CSS でレスポンシブ ブレークポイントを使用する方法を説明します。
Tailwind でレスポンシブ ブレークポイントを使用するにはどうすればよいですか?
Tailwind でレスポンシブ ブレークポイントを使用するには、「」などのレスポンシブ修飾子を使用します。 sm ”、” MD ”、” LG ”、” XL ' と ' 2XL 」を HTML プログラムの他のクラスと組み合わせます。次に、HTML Web ページを表示し、画面サイズを変更して、ブレークポイントが適切に機能していることを確認します。
ステップ 1: HTML プログラムでレスポンシブ修飾子を使用する
HTML プログラムを作成し、必要なスタイルを備えたレスポンシブ修飾子を利用します。たとえば、「」を使用しました。 sm ”、” MD ”、” LG ”、” XL ' と ' 2XL ” レスポンシブ修飾子:
< 体 >
< ディビジョン クラス = 「h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg- yellow-500」 >
< h1 クラス = 「text-7xl text-white text-center p-20」 > Linux のヒント < / h1 >
< / ディビジョン >
< / 体 >
ここ：
- 「 bg-フクシア-400 ”クラスは背景色を設定します。 フクシアに。
- 「 sm:bg-ピンク-600 」クラスは、小さな画面の背景にピンク色を適用します。
- 「 md:bg-green-700 」クラスは、中程度の画面で背景色を緑色に変更します。
- 「 lg:bg-パープル-50 」クラスは、大きな画面の背景色を紫に設定します。
- 「 xl:bg-ティール-600 」クラスは、特大画面の背景にティール色を適用します。
- 「 2xl:bg-イエロー-500 」クラスは、2xl 画面の背景色を黄色に変更します。
ステップ 2: 出力を確認する
HTML Web ページを表示して、レスポンシブ ブレークポイントが適切に機能しているかどうかを確認します。
上記の Web ページでは、ブレークポイントが指定された画面サイズに応じて Web ページの色が変化していることがわかります。
結論
Tailwind でレスポンシブ ブレークポイントを使用するには、「」などのレスポンシブ修飾子を使用します。 sm ”、” MD ”、” LG ”、” XL ' と ' 2XL 」を HTML プログラムの他のクラスと組み合わせます。これらの修飾子は、画面サイズに基づいて特定の要素に異なるスタイルを適用するために使用されます。この記事では、Tailwind CSS でレスポンシブ ブレークポイントを使用する方法を例示しました。