🛰

【Tailwind和訳】SPACING/Space Between

2021/10/24に公開約31,500字

この記事について

この記事は、SPACING/Space Betweenの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Space Between

子要素間のスペースを制御するためのユーティリティ。

Class Properties
space-x-0 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
space-x-0.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.125rem * var(--tw-space-x-reverse));
margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-1.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.375rem * var(--tw-space-x-reverse));
margin-left: calc(0.375rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-2.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.625rem * var(--tw-space-x-reverse));
margin-left: calc(0.625rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-3.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0.875rem * var(--tw-space-x-reverse));
margin-left: calc(0.875rem * calc(1 - var(--tw-space-x-reverse)));
space-x-4 > * + * --tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
space-x-5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-6 > * + * --tw-space-x-reverse: 0;
margin-right: calc(1.5rem * var(--tw-space-x-reverse));
margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-7 > * + * --tw-space-x-reverse: 0;
margin-right: calc(1.75rem * var(--tw-space-x-reverse));
margin-left: calc(1.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-8 > * + * --tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
space-x-9 > * + * --tw-space-x-reverse: 0;
margin-right: calc(2.25rem * var(--tw-space-x-reverse));
margin-left: calc(2.25rem * calc(1 - var(--tw-space-x-reverse)));
space-x-10 > * + * --tw-space-x-reverse: 0;
margin-right: calc(2.5rem * var(--tw-space-x-reverse));
margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-11 > * + * --tw-space-x-reverse: 0;
margin-right: calc(2.75rem * var(--tw-space-x-reverse));
margin-left: calc(2.75rem * calc(1 - var(--tw-space-x-reverse)));
space-x-12 > * + * --tw-space-x-reverse: 0;
margin-right: calc(3rem * var(--tw-space-x-reverse));
margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
space-x-14 > * + * --tw-space-x-reverse: 0;
margin-right: calc(3.5rem * var(--tw-space-x-reverse));
margin-left: calc(3.5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-16 > * + * --tw-space-x-reverse: 0;
margin-right: calc(4rem * var(--tw-space-x-reverse));
margin-left: calc(4rem * calc(1 - var(--tw-space-x-reverse)));
space-x-20 > * + * --tw-space-x-reverse: 0;
margin-right: calc(5rem * var(--tw-space-x-reverse));
margin-left: calc(5rem * calc(1 - var(--tw-space-x-reverse)));
space-x-24 > * + * --tw-space-x-reverse: 0;
margin-right: calc(6rem * var(--tw-space-x-reverse));
margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
space-x-28 > * + * --tw-space-x-reverse: 0;
margin-right: calc(7rem * var(--tw-space-x-reverse));
margin-left: calc(7rem * calc(1 - var(--tw-space-x-reverse)));
space-x-32 > * + * --tw-space-x-reverse: 0;
margin-right: calc(8rem * var(--tw-space-x-reverse));
margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
space-x-36 > * + * --tw-space-x-reverse: 0;
margin-right: calc(9rem * var(--tw-space-x-reverse));
margin-left: calc(9rem * calc(1 - var(--tw-space-x-reverse)));
space-x-40 > * + * --tw-space-x-reverse: 0;
margin-right: calc(10rem * var(--tw-space-x-reverse));
margin-left: calc(10rem * calc(1 - var(--tw-space-x-reverse)));
space-x-44 > * + * --tw-space-x-reverse: 0;
margin-right: calc(11rem * var(--tw-space-x-reverse));
margin-left: calc(11rem * calc(1 - var(--tw-space-x-reverse)));
space-x-48 > * + * --tw-space-x-reverse: 0;
margin-right: calc(12rem * var(--tw-space-x-reverse));
margin-left: calc(12rem * calc(1 - var(--tw-space-x-reverse)));
space-x-52 > * + * --tw-space-x-reverse: 0;
margin-right: calc(13rem * var(--tw-space-x-reverse));
margin-left: calc(13rem * calc(1 - var(--tw-space-x-reverse)));
space-x-56 > * + * --tw-space-x-reverse: 0;
margin-right: calc(14rem * var(--tw-space-x-reverse));
margin-left: calc(14rem * calc(1 - var(--tw-space-x-reverse)));
space-x-60 > * + * --tw-space-x-reverse: 0;
margin-right: calc(15rem * var(--tw-space-x-reverse));
margin-left: calc(15rem * calc(1 - var(--tw-space-x-reverse)));
space-x-64 > * + * --tw-space-x-reverse: 0;
margin-right: calc(16rem * var(--tw-space-x-reverse));
margin-left: calc(16rem * calc(1 - var(--tw-space-x-reverse)));
space-x-72 > * + * --tw-space-x-reverse: 0;
margin-right: calc(18rem * var(--tw-space-x-reverse));
margin-left: calc(18rem * calc(1 - var(--tw-space-x-reverse)));
space-x-80 > * + * --tw-space-x-reverse: 0;
margin-right: calc(20rem * var(--tw-space-x-reverse));
margin-left: calc(20rem * calc(1 - var(--tw-space-x-reverse)));
space-x-96 > * + * --tw-space-x-reverse: 0;
margin-right: calc(24rem * var(--tw-space-x-reverse));
margin-left: calc(24rem * calc(1 - var(--tw-space-x-reverse)));
space-x-px > * + * --tw-space-x-reverse: 0;
margin-right: calc(1px * var(--tw-space-x-reverse));
margin-left: calc(1px * calc(1 - var(--tw-space-x-reverse)));
space-x-reverse > * + * --tw-space-x-reverse: 1;
-space-x-0 > * + * --tw-space-x-reverse: 0;
margin-right: calc(0px * var(--tw-space-x-reverse));
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-space-x-0.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.125rem * var(--tw-space-x-reverse));
margin-left: calc(-0.125rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-1.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-2.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.625rem * var(--tw-space-x-reverse));
margin-left: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-3.5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-0.875rem * var(--tw-space-x-reverse));
margin-left: calc(-0.875rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-4 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-1rem * var(--tw-space-x-reverse));
margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-5 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-1.25rem * var(--tw-space-x-reverse));
margin-left: calc(-1.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-6 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-1.5rem * var(--tw-space-x-reverse));
margin-left: calc(-1.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-7 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-1.75rem * var(--tw-space-x-reverse));
margin-left: calc(-1.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-8 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-2rem * var(--tw-space-x-reverse));
margin-left: calc(-2rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-9 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-2.25rem * var(--tw-space-x-reverse));
margin-left: calc(-2.25rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-10 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-2.5rem * var(--tw-space-x-reverse));
margin-left: calc(-2.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-11 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-2.75rem * var(--tw-space-x-reverse));
margin-left: calc(-2.75rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-12 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-3rem * var(--tw-space-x-reverse));
margin-left: calc(-3rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-14 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-3.5rem * var(--tw-space-x-reverse));
margin-left: calc(-3.5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-16 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-4rem * var(--tw-space-x-reverse));
margin-left: calc(-4rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-20 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-5rem * var(--tw-space-x-reverse));
margin-left: calc(-5rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-24 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-6rem * var(--tw-space-x-reverse));
margin-left: calc(-6rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-28 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-7rem * var(--tw-space-x-reverse));
margin-left: calc(-7rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-32 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-8rem * var(--tw-space-x-reverse));
margin-left: calc(-8rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-36 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-9rem * var(--tw-space-x-reverse));
margin-left: calc(-9rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-40 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-10rem * var(--tw-space-x-reverse));
margin-left: calc(-10rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-44 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-11rem * var(--tw-space-x-reverse));
margin-left: calc(-11rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-48 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-12rem * var(--tw-space-x-reverse));
margin-left: calc(-12rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-52 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-13rem * var(--tw-space-x-reverse));
margin-left: calc(-13rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-56 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-14rem * var(--tw-space-x-reverse));
margin-left: calc(-14rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-60 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-15rem * var(--tw-space-x-reverse));
margin-left: calc(-15rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-64 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-16rem * var(--tw-space-x-reverse));
margin-left: calc(-16rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-72 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-18rem * var(--tw-space-x-reverse));
margin-left: calc(-18rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-80 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-20rem * var(--tw-space-x-reverse));
margin-left: calc(-20rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-96 > * + * --tw-space-x-reverse: 0;
margin-right: calc(-24rem * var(--tw-space-x-reverse));
margin-left: calc(-24rem * calc(1 - var(--tw-space-x-reverse)));
-space-x-px > * + * --tw-space-x-reverse: 0;
margin-right: calc(-1px * var(--tw-space-x-reverse));
margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
space-y-0 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
space-y-0.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
space-y-1 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
space-y-1.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
space-y-2 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
space-y-2.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
space-y-3 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
space-y-3.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
space-y-4 > * + * --tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
space-y-5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
space-y-6 > * + * --tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
space-y-7 > * + * --tw-space-y-reverse: 0;
margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
space-y-8 > * + * --tw-space-y-reverse: 0;
margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2rem * var(--tw-space-y-reverse));
space-y-9 > * + * --tw-space-y-reverse: 0;
margin-top: calc(2.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.25rem * var(--tw-space-y-reverse));
space-y-10 > * + * --tw-space-y-reverse: 0;
margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.5rem * var(--tw-space-y-reverse));
space-y-11 > * + * --tw-space-y-reverse: 0;
margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
space-y-12 > * + * --tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
space-y-14 > * + * --tw-space-y-reverse: 0;
margin-top: calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3.5rem * var(--tw-space-y-reverse));
space-y-16 > * + * --tw-space-y-reverse: 0;
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
space-y-20 > * + * --tw-space-y-reverse: 0;
margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(5rem * var(--tw-space-y-reverse));
space-y-24 > * + * --tw-space-y-reverse: 0;
margin-top: calc(6rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(6rem * var(--tw-space-y-reverse));
space-y-28 > * + * --tw-space-y-reverse: 0;
margin-top: calc(7rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(7rem * var(--tw-space-y-reverse));
space-y-32 > * + * --tw-space-y-reverse: 0;
margin-top: calc(8rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(8rem * var(--tw-space-y-reverse));
space-y-36 > * + * --tw-space-y-reverse: 0;
margin-top: calc(9rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(9rem * var(--tw-space-y-reverse));
space-y-40 > * + * --tw-space-y-reverse: 0;
margin-top: calc(10rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(10rem * var(--tw-space-y-reverse));
space-y-44 > * + * --tw-space-y-reverse: 0;
margin-top: calc(11rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(11rem * var(--tw-space-y-reverse));
space-y-48 > * + * --tw-space-y-reverse: 0;
margin-top: calc(12rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(12rem * var(--tw-space-y-reverse));
space-y-52 > * + * --tw-space-y-reverse: 0;
margin-top: calc(13rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(13rem * var(--tw-space-y-reverse));
space-y-56 > * + * --tw-space-y-reverse: 0;
margin-top: calc(14rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(14rem * var(--tw-space-y-reverse));
space-y-60 > * + * --tw-space-y-reverse: 0;
margin-top: calc(15rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(15rem * var(--tw-space-y-reverse));
space-y-64 > * + * --tw-space-y-reverse: 0;
margin-top: calc(16rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(16rem * var(--tw-space-y-reverse));
space-y-72 > * + * --tw-space-y-reverse: 0;
margin-top: calc(18rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(18rem * var(--tw-space-y-reverse));
space-y-80 > * + * --tw-space-y-reverse: 0;
margin-top: calc(20rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(20rem * var(--tw-space-y-reverse));
space-y-96 > * + * --tw-space-y-reverse: 0;
margin-top: calc(24rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(24rem * var(--tw-space-y-reverse));
space-y-px > * + * --tw-space-y-reverse: 0;
margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1px * var(--tw-space-y-reverse));
space-y-reverse > * + * --tw-space-y-reverse: 1;
-space-y-0 > * + * --tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
-space-y-0.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.125rem * var(--tw-space-y-reverse));
-space-y-1 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.25rem * var(--tw-space-y-reverse));
-space-y-1.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.375rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.375rem * var(--tw-space-y-reverse));
-space-y-2 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.5rem * var(--tw-space-y-reverse));
-space-y-2.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.625rem * var(--tw-space-y-reverse));
-space-y-3 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.75rem * var(--tw-space-y-reverse));
-space-y-3.5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-0.875rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-0.875rem * var(--tw-space-y-reverse));
-space-y-4 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1rem * var(--tw-space-y-reverse));
-space-y-5 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1.25rem * var(--tw-space-y-reverse));
-space-y-6 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1.5rem * var(--tw-space-y-reverse));
-space-y-7 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-1.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1.75rem * var(--tw-space-y-reverse));
-space-y-8 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-2rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-2rem * var(--tw-space-y-reverse));
-space-y-9 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-2.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-2.25rem * var(--tw-space-y-reverse));
-space-y-10 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-2.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-2.5rem * var(--tw-space-y-reverse));
-space-y-11 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-2.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-2.75rem * var(--tw-space-y-reverse));
-space-y-12 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-3rem * var(--tw-space-y-reverse));
-space-y-14 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-3.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-3.5rem * var(--tw-space-y-reverse));
-space-y-16 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-4rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-4rem * var(--tw-space-y-reverse));
-space-y-20 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-5rem * var(--tw-space-y-reverse));
-space-y-24 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-6rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-6rem * var(--tw-space-y-reverse));
-space-y-28 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-7rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-7rem * var(--tw-space-y-reverse));
-space-y-32 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-8rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-8rem * var(--tw-space-y-reverse));
-space-y-36 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-9rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-9rem * var(--tw-space-y-reverse));
-space-y-40 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-10rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-10rem * var(--tw-space-y-reverse));
-space-y-44 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-11rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-11rem * var(--tw-space-y-reverse));
-space-y-48 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-12rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-12rem * var(--tw-space-y-reverse));
-space-y-52 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-13rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-13rem * var(--tw-space-y-reverse));
-space-y-56 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-14rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-14rem * var(--tw-space-y-reverse));
-space-y-60 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-15rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-15rem * var(--tw-space-y-reverse));
-space-y-64 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-16rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-16rem * var(--tw-space-y-reverse));
-space-y-72 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-18rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-18rem * var(--tw-space-y-reverse));
-space-y-80 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-20rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-20rem * var(--tw-space-y-reverse));
-space-y-96 > * + * --tw-space-y-reverse: 0;
margin-top: calc(-24rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-24rem * var(--tw-space-y-reverse));
-space-y-px > * + * --tw-space-y-reverse: 0;
margin-top: calc(-1px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(-1px * var(--tw-space-y-reverse));

子要素間の水平方向のスペースを追加する

space-x-{amount}ユーティリティーを使って、要素間の水平方向のスペースを制御します。

<div class="flex space-x-4 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子要素間の垂直方向のスペースを追加する

space-y-{amount}ユーティリティーを使って、要素間の垂直方向のスペースを制御します。

<div class="space-y-6 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

子要素の順序の反転

flex-row-reverseflex-col-reverseなどを使って要素の順序を逆にした場合、space-x-reversespace-y-reverseユーティリティを使って、各要素の正しい面にスペースが追加されるようにします。

<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

制限事項

これらのユーティリティは、グループ内の先頭以外のすべての要素にマージンを追加するための単なるショートカットであり、グリッドや折り返しレイアウトなどの複雑なケースや、子要素が DOM の自然な順序ではなく複雑なカスタム順序でレンダリングされている状況を扱うようには設計されていません。

このような場合には、可能な限りギャップユーティリティーを使用するか、親要素に負のマージンが一致するすべての要素にマージンを追加するのが良いでしょう。

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

divide ユーティリティーとの組み合わせはできません

space-*ユーティリティーはdivide ユーティリティーと一緒に使えないように設計されています。そのような場合には、代わりに margin/padding ユーティリティを子要素に追加することを検討してください。

レスポンシブ

特定のブレークポイントで要素間のスペースを制御するには、既存のスペースユーティリティーに{screen}:というプレフィックスを追加します。例えば、ある要素にmd:space-x-8というクラスを追加すると、中程度のスクリーンサイズ以上でspace-x-8ユーティリティが適用されます。

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

スペーシングのスケール

スペースの間隔、パディング、マージン、幅、高さの値を一度にカスタマイズしたい場合は、tailwind.config.jsファイルのtheme.spacingセクションを使用します。

tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

値と値の間のスペースだけをカスタマイズするには、tailwind.config.js ファイルの theme.space セクションを使用します。

tailwind.config.js
  module.exports = {
    theme: {
      space: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、スペースユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションのspaceプロパティを変更することで、スペースユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、この設定ではホバーとフォーカスのバリアントも生成されます。

tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       space: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトで Space ユーティリティを使用しない場合は、設定ファイルの corePlugins セクションで space プロパティを false に設定することで、完全に無効にすることができます。

tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     space: false,
    }
  }

Discussion

ログインするとコメントできます