” hスクリーン Tailwind の ” クラスは、ビューポートの高さを HTML 要素に割り当てるために使用されます。ビューポートは、クライアントの画面サイズの別の名前です。開発者は、この「 hスクリーン ” クラスを作成し、それに応じていくつかの Tailwind クラスを適用します。
この記事では、「」を使用して Tailwind の要素にビューポートの高さを追加する手順を説明します。 hスクリーン ' クラス。
Tailwind の「h-screen」クラスを使用して要素のビューポートの高さを設定するにはどうすればよいですか?
要素に「」を使用してビューポートの高さが割り当てられている場合、 hスクリーン ” クラスを使用すると、クライアントの画面に応じて高さプロパティが自動的に調整されます。 Tailwind でビューポートの高さを使用するには、以下の規則に従います。
< ディビジョン クラス = 「hスクリーン」 > こんにちは < / ディビジョン >
上記のデモンストレーションから、「 hスクリーン 」は、レイアウトを設計するために他のさまざまな Tailwind クラスとともに要素の class 属性で使用されます。
ダミーのダッシュボードを作成し、ダッシュボード画面のサイドバーにビューポートの高さを与えてみましょう。
< ディビジョン クラス = 'フレックス' >
< ディビジョン クラス = 「w-56 h-screenrounded-lg bg-blue-600 text-center text-シアン-50 py-6 text-2xl font-bold」 >ダッシュボード
< ウル クラス = 「テキスト-lg py-8 スペース-y-7」 >
< それ >チーム< / それ >
< それ >プロジェクト< / それ >
< それ >レポート< / それ >
< それ >書類< / それ >
< / ウル >
< / ディビジョン >
< ディビジョン クラス = 「テキストセンターテキスト-3xl py-8 ps-5」 >ダッシュボードへようこそ!< / ディビジョン >
< / ディビジョン >
コードの説明:
- まず、「 ディビジョン ” 要素は、” のクラスを持って作成されます。 フレックス 」のように、このクラスは常駐する項目を横一列に配置します。
- 次に、別の「」を作成します。 ディビジョン 」を使用して上下に 8 ピクセルのパディングを追加 py-2 ” クラスを作成し、” を使用して固定幅を割り当てます。 w-56 ' クラス。次に、要素の高さを「」でビューポートの高さに設定します。 hスクリーン ' クラス。コンテナの角は丸く設定されています。
- ” bg-{色}-{数字} ” クラスは、コンテナーに背景色を提供するために使用されます。 ” テキストセンター ”クラスはテキストコンテンツを中央に揃えます。テキストのフォントの太さは「」に設定されています。 大胆な ”、フォントサイズは” 2XL ”。
- 次に、順序なしリスト「<」 ウル >」は大きなフォントサイズで作成され、「 48ピクセル 「space-y」tailwindクラスを使用した「margin-top」。
- 次に、「<」を使用して 4 つのリスト項目が作成されます。 それ >」タグです。
- 別の ' ディビジョン ” 要素は、「 ぴー」と「ps」 ' クラス。
上記で説明したコードの出力は次のとおりです。
上記の出力から、ダッシュボードのサイドバーが画面のビューポートの高さであることは明らかです。以上が「」の目的です。 hスクリーン テイルウィンドのクラス。
結論
” hスクリーン Tailwind の 」クラスは、ビューポートの高さを要素、つまりクライアントの画面の高さに割り当てるために使用されます。 「」を使用して、 hスクリーン ” クラスを使用すると、要素は画面の高さを自動的に継承します。 Tailwind でビューポートの高さを使用するには、「 hスクリーン ” プロパティは、” の値として渡す必要があります。 クラス 「<」のような属性 div class= 'h-screen ”>”。この記事では「 hスクリーン テイルウィンドのクラス。