Tailwind CSS は「 項目を揃える 」ユーティリティを使用して、コンテナの交差軸に沿ったフレックス項目とグリッド項目の位置を制御します。 「items-start」、「items-center」、「items-end」、「items-baseline」などのさまざまなユーティリティ クラスがあります。さらに、ユーザーは「items-
この記事では、Tailwind CSS で「align-items 上のホバー」ユーティリティを適用する方法を例に説明します。
Tailwind の「align-items」ユーティリティにホバーを適用するにはどうすればよいですか?
Tailwind の「align-items」ユーティリティにホバーを適用するには、HTML 構造を作成し、「 ホバリング ” 目的の” ユーティリティ クラス items-<値> コンテナ内のユーティリティ。次に、HTML Web ページをチェックアウトし、指定された要素の上にマウスを移動して変更を確認します。
構文
< エレメント クラス = 'hover:items-<値> ...' > ... エレメント >
例
この例では、「items-start」プロパティを持つフレックス コンテナを作成します。次に、「」を使用します。 ホバー:アイテムセンター 「」のクラス 出力 Tailwind の「align-items」ユーティリティにホバー効果を適用するには、「 ホバリング ” 特定の” を持つユーティリティ クラス items-<値> 」ユーティリティをフレックスまたはグリッドコンテナに追加します。確認するには、Web ページ上の指定されたコンテナの上にマウスを置きます。この記事では、Tailwind の「align-items」ユーティリティにホバー効果を適用する例を示しました。
< 体 >
< ディビジョン クラス = 「flex items-start hover:items-center justify-around text-center h-44 m-3 bg-pink-300 gap-4」 >
< ディビジョン クラス = 「bg-ピンク-600 py-4 w-40」 > 1 ディビジョン >
< ディビジョン クラス = 「bg-ピンク-600 py-12 w-40」 > 2 ディビジョン >
< ディビジョン クラス = 「bg-ピンク-600 py-8 w-40」 > 3 ディビジョン >
ディビジョン >
体 >
ここ：
上記の Web ページから、ホバー時にフレックス項目の配置がコンテナーの交差軸に沿って変化していることがわかります。 結論