Tailwind の要素間に水平および垂直のスペースを追加するにはどうすればよいですか?

• 「 bg-ティール-500 ” クラスは、フレックス要素の背景を青緑に設定します。
• 「 w-20 」クラスは、各フレックス項目の幅を 20 単位に設定します。
• 「 p-5 」クラスは、各フレックス項目のすべての側面に 5 単位のパディングを追加します。

出力

上記の出力は、flex 要素間の水平方向のスペースが正常に適用されたことを示しています。

Tailwind の要素間に垂直方向のスペースを追加するにはどうすればよいですか?

Tailwind の要素間に垂直方向のスペースを追加するには、「 スペース-y-<値> ” クラスは、HTML プログラム内の特定の要素とともに使用されます。このクラスは、y 軸に沿って要素間にスペースを追加します。

構文

ここで、「y」は「y軸」または「垂直空間」を表します。 「」を「5」、「12」などの実数値に必ず置き換えてください。

例: Tailwind の要素間に垂直方向のスペースを適用する

この例では、列にいくつかの子要素を含むフレックス コンテナがあります。 「」を使用します。 スペース-y-5 ” ユーティリティ クラスと”