この記事では、Tailwind CSS でブレークポイントとメディア クエリによる「ブレークアフター」を利用する方法を説明します。
Tailwind でブレークポイントとメディア クエリを使用して「ブレークアフター」を利用する方法は?
ブレークポイントとメディア クエリで「ブレークアフター」を利用するには、HTML プログラムの「ブレークアフター」ユーティリティを使用して、さまざまな画面サイズに応じてさまざまな値とスタイルを定義します。次に、HTML Web ページを表示して出力を確認します。
実際の実装を見てみましょう。
ステップ 1: 「ブレークアフター」ユーティリティでブレークポイントとメディア クエリを使用する
HTML プログラムを作成し、「ブレークアフター」ユーティリティを使用して、さまざまな画面サイズに応じてさまざまな値とスタイルを指定します。たとえば、「」を使用しました。 MD ” を使用したブレークポイント 改行後の列 ” ユーティリティと” LG ” を使用したブレークポイント 回避後の休憩 ' 効用：
< 体 >
< ディビジョン クラス = 「列-2 bg-ティール-400」 >
< p クラス = 「md:break-after-column lg:break-after-avoid」 > こんにちは... < / p >
< p > ようこそここへ... < / p >
< p > Tailwind CSS について学ぶ... < / p >
< p > CSSフレームワークです... < / p >
< p > さよなら... < / p >
< / ディビジョン >
< / 体 >
ここ：
- ” md:列後のブレーク ” クラスは、この特定の
要素の後に列区切りが発生する必要があることを示します。 MD 」ブレークポイント (中程度の画面サイズ)。
- ” lg:ブレイク後回避 ” クラスは、要素が「」でのブレークアフターを回避する必要があることを示唆しています。 LG 」ブレークポイント（大画面サイズ）。
ステップ 2: 出力を確認する
HTML Web ページを表示して、ブレークポイントとメディア クエリが適用されているかどうかを確認します。
上記Webページでは、中画面では指定要素で段切れが発生しましたが、大画面では段切れが回避されました。
結論
Tailwind でブレークポイントとメディア クエリによる「ブレークアフター」を利用するには、まず HTML ファイルを作成します。次に、画面サイズごとに異なる値とスタイルを指定して、「ブレークアフター」ユーティリティでブレークポイントとメディア クエリを使用します。確認するには、HTML プログラムを実行して Web ページを表示します。この記事では、Tailwind CSS でブレークポイントとメディア クエリによる「ブレークアフター」を利用する方法を説明しました。