Tailwind で負のスペース値を使用するにはどうすればよいですか?

Tailwind CSS では、「 間のスペース 」ユーティリティは、フレックス コンテナまたはグリッド コンテナの子要素間のスペースを制御するために使用されます。子要素間の水平方向と垂直方向のスペースをそれぞれ適用する「space-x-」や「space-y-」などのさまざまなクラスが提供されています。さらに、ユーザーは、 ネガティブ これらのユーティリティを使用して値を変更すると、要素間に反対方向の間隔が作成されます。また、ある要素を別の要素の中に配置するために利用することもできます。

このガイドでは、Tailwind で負のスペース値を使用する方法を例示します。

Tailwind で負のスペース値を使用するにはどうすればよいですか?

Tailwind で負のスペース値を使用するには、まず HTML 構造を作成します。次に、ダッシュを使用します。 – 」を、必要な「間隔」ユーティリティ クラスに置き換えて、負の値に変換します。 ” -space-x-<値> ' そして ' -space-y-<値> 」ユーティリティは、ある要素を別の要素の中に配置するためによく使用されます。

より深く理解するために、以下の例を見てみましょう。

例 1: 要素間に負の水平間隔を適用する

この例では、行にいくつかの子要素を含むフレックス コンテナがあります。 「」を使用します。 -スペース-x-8 ” クラスを使用して、フレックス要素間に負の水平間隔を適用します。