📦

【Tailwind和訳】LAYOUT/Top / Right / Bottom / Left

2021/10/24に公開約32,900字

この記事について

この記事は、LAYOUT/Top / Right / Bottom / Leftの記事を和訳したものです。

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

Top / Right / Bottom / Left

位置決めされた要素の配置を制御するためのユーティリティ。

クラスとプロパティの対応表
クラス プロパティ
inset-0 top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
-inset-0 top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset-x-0 left: 0px;
right: 0px;
-inset-x-0 left: 0px;
right: 0px;
inset-y-0 top: 0px;
bottom: 0px;
-inset-y-0 top: 0px;
bottom: 0px;
top-0 top: 0px;
-top-0 top: 0px;
right-0 right: 0px;
-right-0 right: 0px;
bottom-0 bottom: 0px;
-bottom-0 bottom: 0px;
left-0 left: 0px;
-left-0 left: 0px;
inset-px top: 1px;
right: 1px;
bottom: 1px;
left: 1px;
-inset-px top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
inset-x-px left: 1px;
right: 1px;
-inset-x-px left: -1px;
right: -1px;
inset-y-px top: 1px;
bottom: 1px;
-inset-y-px top: -1px;
bottom: -1px;
top-px top: 1px;
-top-px top: -1px;
right-px right: 1px;
-right-px right: -1px;
bottom-px bottom: 1px;
-bottom-px bottom: -1px;
left-px left: 1px;
-left-px left: -1px;
inset-0.5 top: 0.125rem;
right: 0.125rem;
bottom: 0.125rem;
left: 0.125rem;
-inset-0.5 top: -0.125rem;
right: -0.125rem;
bottom: -0.125rem;
left: -0.125rem;
inset-x-0.5 left: 0.125rem;
right: 0.125rem;
-inset-x-0.5
left: -0.125rem;
right: -0.125rem;
inset-y-0.5 top: 0.125rem;
bottom: 0.125rem;
-inset-y-0.5 top: -0.125rem;
bottom: -0.125rem;
top-0.5 top: 0.125rem;
-top-0.5 top: -0.125rem;
right-0.5 right: 0.125rem;
-right-0.5 right: -0.125rem;
bottom-0.5 bottom: 0.125rem;
-bottom-0.5 bottom: -0.125rem;
left-0.5 left: 0.125rem;
-left-0.5 left: -0.125rem;
inset-1 top: 0.25rem;
right: 0.25rem;
bottom: 0.25rem;
left: 0.25rem;
-inset-1 top: -0.25rem;
right: -0.25rem;
bottom: -0.25rem;
left: -0.25rem;
inset-x-1 left: 0.25rem;
right: 0.25rem;
-inset-x-1 left: -0.25rem;
right: -0.25rem;
inset-y-1 top: 0.25rem;
bottom: 0.25rem;
-inset-y-1 top: -0.25rem;
bottom: -0.25rem;
top-1 top: 0.25rem;
-top-1 top: -0.25rem;
right-1 right: 0.25rem;
-right-1 right: -0.25rem;
bottom-1 bottom: 0.25rem;
-bottom-1 bottom: -0.25rem;
left-1 left: 0.25rem;
-left-1 left: -0.25rem;
inset-1.5 top: 0.375rem;
right: 0.375rem;
bottom: 0.375rem;
left: 0.375rem;
-inset-1.5 top: -0.375rem;
right: -0.375rem;
bottom: -0.375rem;
left: -0.375rem;
inset-x-1.5 left: 0.375rem;
right: 0.375rem;
-inset-x-1.5 left: -0.375rem;
right: -0.375rem;
inset-y-1.5 top: 0.375rem;
bottom: 0.375rem;
-inset-y-1.5 top: -0.375rem;
bottom: -0.375rem;
top-1.5 top: 0.375rem;
-top-1.5 top: -0.375rem;
right-1.5 right: 0.375rem;
-right-1.5 right: -0.375rem;
bottom-1.5 bottom: 0.375rem;
-bottom-1.5 bottom: -0.375rem;
left-1.5 left: 0.375rem;
-left-1.5 left: -0.375rem;
inset-2 top: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
-inset-2 top: -0.5rem;
right: -0.5rem;
bottom: -0.5rem;
left: -0.5rem;
inset-x-2 left: 0.5rem;
right: 0.5rem;
-inset-x-2 left: -0.5rem;
right: -0.5rem;
inset-y-2 top: 0.5rem;
bottom: 0.5rem;
-inset-y-2 top: -0.5rem;
bottom: -0.5rem;
top-2 top: 0.5rem;
-top-2 top: -0.5rem;
right-2 right: 0.5rem;
-right-2 right: -0.5rem;
bottom-2 bottom: 0.5rem;
-bottom-2 bottom: -0.5rem;
left-2 left: 0.5rem;
-left-2 left: -0.5rem;
inset-2.5 top: 0.625rem;
right: 0.625rem;
bottom: 0.625rem;
left: 0.625rem;
-inset-2.5 top: -0.625rem;
right: -0.625rem;
bottom: -0.625rem;
left: -0.625rem;
inset-x-2.5 left: 0.625rem;
right: 0.625rem;
-inset-x-2.5 left: -0.625rem;
right: -0.625rem;
inset-y-2.5 top: 0.625rem;
bottom: 0.625rem;
-inset-y-2.5 top: -0.625rem;
bottom: -0.625rem;
top-2.5 top: 0.625rem;
-top-2.5 top: -0.625rem;
right-2.5 right: 0.625rem;
-right-2.5 right: -0.625rem;
bottom-2.5 bottom: 0.625rem;
-bottom-2.5 bottom: -0.625rem;
left-2.5 left: 0.625rem;
-left-2.5 left: -0.625rem;
inset-3 top: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
left: 0.75rem;
-inset-3 top: -0.75rem;
right: -0.75rem;
bottom: -0.75rem;
left: -0.75rem;
inset-x-3 left: 0.75rem;
right: 0.75rem;
-inset-x-3 left: -0.75rem;
right: -0.75rem;
inset-y-3 top: 0.75rem;
bottom: 0.75rem;
-inset-y-3 top: -0.75rem;
bottom: -0.75rem;
top-3 top: 0.75rem;
-top-3 top: -0.75rem;
right-3 right: 0.75rem;
-right-3 right: -0.75rem;
bottom-3 bottom: 0.75rem;
-bottom-3 bottom: -0.75rem;
left-3 left: 0.75rem;
-left-3 left: -0.75rem;
inset-3.5 top: 0.875rem;
right: 0.875rem;
bottom: 0.875rem;
left: 0.875rem;
-inset-3.5 top: -0.875rem;
right: -0.875rem;
bottom: -0.875rem;
left: -0.875rem;
inset-x-3.5 left: 0.875rem;
right: 0.875rem;
-inset-x-3.5 left: -0.875rem;
right: -0.875rem;
inset-y-3.5 top: 0.875rem;
bottom: 0.875rem;
-inset-y-3.5 top: -0.875rem;
bottom: -0.875rem;
top-3.5 top: 0.875rem;
-top-3.5 top: -0.875rem;
right-3.5 right: 0.875rem;
-right-3.5 right: -0.875rem;
bottom-3.5 bottom: 0.875rem;
-bottom-3.5 bottom: -0.875rem;
left-3.5 left: 0.875rem;
-left-3.5 left: -0.875rem;
inset-4 top: 1rem;
right: 1rem;
bottom: 1rem;
left: 1rem;
-inset-4 top: -1rem;
right: -1rem;
bottom: -1rem;
left: -1rem;
inset-x-4 left: 1rem;
right: 1rem;
-inset-x-4 left: -1rem;
right: -1rem;
inset-y-4 top: 1rem;
bottom: 1rem;
-inset-y-4 top: -1rem;
bottom: -1rem;
top-4 top: 1rem;
-top-4 top: -1rem;
right-4 right: 1rem;
-right-4 right: -1rem;
bottom-4 bottom: 1rem;
-bottom-4 bottom: -1rem;
left-4 left: 1rem;
-left-4 left: -1rem;
inset-5 top: 1.25rem;
right: 1.25rem;
bottom: 1.25rem;
left: 1.25rem;
-inset-5 top: -1.25rem;
right: -1.25rem;
bottom: -1.25rem;
left: -1.25rem;
inset-x-5 left: 1.25rem;
right: 1.25rem;
-inset-x-5 left: -1.25rem;
right: -1.25rem;
inset-y-5 top: 1.25rem;
bottom: 1.25rem;
-inset-y-5 top: -1.25rem;
bottom: -1.25rem;
top-5 top: 1.25rem;
-top-5 top: -1.25rem;
right-5 right: 1.25rem;
-right-5 right: -1.25rem;
bottom-5 bottom: 1.25rem;
-bottom-5 bottom: -1.25rem;
left-5 left: 1.25rem;
-left-5 left: -1.25rem;
inset-6 top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
-inset-6 top: -1.5rem;
right: -1.5rem;
bottom: -1.5rem;
left: -1.5rem;
inset-x-6 left: 1.5rem;
right: 1.5rem;
-inset-x-6 left: -1.5rem;
right: -1.5rem;
inset-y-6 top: 1.5rem;
bottom: 1.5rem;
-inset-y-6 top: -1.5rem;
bottom: -1.5rem;
top-6 top: 1.5rem;
-top-6 top: -1.5rem;
right-6 right: 1.5rem;
-right-6 right: -1.5rem;
bottom-6 bottom: 1.5rem;
-bottom-6 bottom: -1.5rem;
left-6 left: 1.5rem;
-left-6 left: -1.5rem;
inset-7 top: 1.75rem;
right: 1.75rem;
bottom: 1.75rem
left: 1.75rem;
-inset-7 top: -1.75rem;
right: -1.75rem;
bottom: -1.75rem;
left: -1.75rem;
inset-x-7 left: 1.75rem;
right: 1.75rem;
-inset-x-7 left: -1.75rem;
right: -1.75rem;
inset-y-7 top: 1.75rem;
bottom: 1.75rem;
-inset-y-7 top: -1.75rem;
bottom: -1.75rem;
top-7 top: 1.75rem;
-top-7 top: -1.75rem;
right-7 right: 1.75rem;
-right-7 right: -1.75rem;
bottom-7 bottom: 1.75rem;
-bottom-7 bottom: -1.75rem;
left-7 left: 1.75rem;
-left-7 left: -1.75rem;
inset-8 top: 2rem;
right: 2rem;
bottom: 2rem;
left: 2rem;
-inset-8 top: -2rem;
right: -2rem;
bottom: -2rem;
left: -2rem;
inset-x-8 left: 2rem;
right: 2rem;
-inset-x-8 left: -2rem;
right: -2rem;
inset-y-8 top: 2rem;
bottom: 2rem;
-inset-y-8 top: -2rem;
bottom: -2rem;
top-8 top: 2rem;
-top-8 top: -2rem;
right-8 right: 2rem;
-right-8 right: -2rem;
bottom-8 bottom: 2rem;
-bottom-8 bottom: -2rem;
left-8 left: 2rem;
-left-8 left: -2rem;
inset-9 top: 2.25rem;
right: 2.25rem;
bottom: 2.25rem;
left: 2.25rem;
-inset-9 top: -2.25rem;
right: -2.25rem;
bottom: -2.25rem;
left: -2.25rem;
inset-x-9 left: 2.25rem;
right: 2.25rem;
-inset-x-9 left: -2.25rem;
right: -2.25rem;
inset-y-9 top: 2.25rem;
bottom: 2.25rem;
-inset-y-9 top: -2.25rem;
bottom: -2.25rem;
top-9 top: 2.25rem;
-top-9 top: -2.25rem;
right-9 right: 2.25rem;
-right-9 right: -2.25rem;
bottom-9 bottom: 2.25rem;
-bottom-9 bottom: -2.25rem;
left-9 left: 2.25rem;
-left-9 left: -2.25rem;
inset-10 top: 2.5rem;
right: 2.5rem;
bottom: 2.5rem;
left: 2.5rem;
-inset-10 top: -2.5rem;
right: -2.5rem;
bottom: -2.5rem;
left: -2.5rem;
inset-x-10 left: 2.5rem;
right: 2.5rem;
-inset-x-10 left: -2.5rem;
right: -2.5rem;
inset-y-10 top: 2.5rem;
bottom: 2.5rem;
-inset-y-10 top: -2.5rem;
bottom: -2.5rem;
top-10 top: 2.5rem;
-top-10 top: -2.5rem;
right-10 right: 2.5rem;
-right-10 right: -2.5rem;
bottom-10 bottom: 2.5rem;
-bottom-10 bottom: -2.5rem;
left-10 left: 2.5rem;
-left-10 left: -2.5rem;
inset-11 top: 2.75rem;
right: 2.75rem;
bottom: 2.75rem;
left: 2.75rem;
-inset-11 top: -2.75rem;
right: -2.75rem;
bottom: -2.75rem;
left: -2.75rem;
inset-x-11 left: 2.75rem;
right: 2.75rem;
-inset-x-11 left: -2.75rem;
right: -2.75rem;
inset-y-11 top: 2.75rem;
bottom: 2.75rem;
-inset-y-11 top: -2.75rem;
bottom: -2.75rem;
top-11 top: 2.75rem;
-top-11 top: -2.75rem;
right-11 right: 2.75rem;
-right-11 right: -2.75rem;
bottom-11 bottom: 2.75rem;
-bottom-11 bottom: -2.75rem;
left-11 left: 2.75rem;
-left-11 left: -2.75rem;
inset-12 top: 3rem;
right: 3rem;
bottom: 3rem;
left: 3rem;
-inset-12 top: -3rem;
right: -3rem;
bottom: -3rem;
left: -3rem;
inset-x-12 left: 3rem;
right: 3rem;
-inset-x-12 left: -3rem;
right: -3rem;
inset-y-12 top: 3rem;
bottom: 3rem;
-inset-y-12 top: -3rem;
bottom: -3rem;
top-12 top: 3rem;
-top-12 top: -3rem;
right-12 right: 3rem;
-right-12 right: -3rem;
bottom-12 bottom: 3rem;
-bottom-12 bottom: -3rem;
left-12 left: 3rem;
-left-12 left: -3rem;
inset-14 top: 3.5rem;
right: 3.5rem;
bottom: 3.5rem;
left: 3.5rem;
-inset-14 top: -3.5rem;
right: -3.5rem;
bottom: -3.5rem;
left: -3.5rem;
inset-x-14 left: 3.5rem;
right: 3.5rem;
-inset-x-14 left: -3.5rem;
right: -3.5rem;
inset-y-14 top: 3.5rem;
bottom: 3.5rem;
-inset-y-14 top: -3.5rem;
bottom: -3.5rem;
top-14 top: 3.5rem;
-top-14 top: -3.5rem;
right-14 right: 3.5rem;
-right-14 right: -3.5rem;
bottom-14 bottom: 3.5rem;
-bottom-14 bottom: -3.5rem;
left-14 left: 3.5rem;
-left-14 left: -3.5rem;
inset-16 top: 4rem;
right: 4rem;
bottom: 4rem;
left: 4rem;
-inset-16 top: -4rem;
right: -4rem;
bottom: -4rem;
left: -4rem;
inset-x-16 left: 4rem;
right: 4rem;
-inset-x-16 left: -4rem;
right: -4rem;
inset-y-16 top: 4rem;
bottom: 4rem;
-inset-y-16 top: -4rem;
bottom: -4rem;
top-16 top: 4rem;
-top-16 top: -4rem;
right-16 right: 4rem;
-right-16 right: -4rem;
bottom-16 bottom: 4rem;
-bottom-16 bottom: -4rem;
left-16 left: 4rem;
-left-16 left: -4rem;
inset-20 top: 5rem;
right: 5rem;
bottom: 5rem;
left: 5rem;
-inset-20 top: -5rem;
right: -5rem;
bottom: -5rem;
left: -5rem;
inset-x-20 left: 5rem;
right: 5rem;
-inset-x-20 left: -5rem;
right: -5rem;
inset-y-20 top: 5rem;
bottom: 5rem;
-inset-y-20 top: -5rem;
bottom: -5rem;
top-20 top: 5rem;
-top-20 top: -5rem;
right-20 right: 5rem;
-right-20 right: -5rem;
bottom-20 bottom: 5rem;
-bottom-20 bottom: -5rem;
left-20 left: 5rem;
-left-20 left: -5rem;
inset-24 top: 6rem;
right: 6rem;
bottom: 6rem;
left: 6rem;
-inset-24 top: -6rem;
right: -6rem;
bottom: -6rem;
left: -6rem;
inset-x-24 left: 6rem;
right: 6rem;
-inset-x-24 left: -6rem;
right: -6rem;
inset-y-24 top: 6rem;
bottom: 6rem;
-inset-y-24 top: -6rem;
bottom: -6rem;
top-24 top: 6rem;
-top-24 top: -6rem;
right-24 right: 6rem;
-right-24 right: -6rem;
bottom-24 bottom: 6rem;
-bottom-24 bottom: -6rem;
left-24 left: 6rem;
-left-24 left: -6rem;
inset-28 top: 7rem;
right: 7rem;
bottom: 7rem;
left: 7rem;
-inset-28 top: -7rem;
right: -7rem;
bottom: -7rem;
left: -7rem;
inset-x-28 left: 7rem;
right: 7rem;
-inset-x-28 left: -7rem;
right: -7rem;
inset-y-28 top: 7rem;
bottom: 7rem;
-inset-y-28 top: -7rem;
bottom: -7rem;
top-28 top: 7rem;
-top-28 top: -7rem;
right-28 right: 7rem;
-right-28 right: -7rem;
bottom-28 bottom: 7rem;
-bottom-28 bottom: -7rem;
left-28 left: 7rem;
-left-28 left: -7rem;
inset-32 top: 8rem;
right: 8rem;
bottom: 8rem;
left: 8rem;
-inset-32 top: -8rem;
right: -8rem;
bottom: -8rem;
left: -8rem;
inset-x-32 left: 8rem;
right: 8rem;
-inset-x-32 left: -8rem;
right: -8rem;
inset-y-32 top: 8rem;
bottom: 8rem;
-inset-y-32 top: -8rem;
bottom: -8rem;
top-32 top: 8rem;
-top-32 top: -8rem;
right-32 right: 8rem;
-right-32 right: -8rem;
bottom-32 bottom: 8rem;
-bottom-32 bottom: -8rem;
left-32 left: 8rem;
-left-32 left: -8rem;
inset-36 top: 9rem;
right: 9rem;
bottom: 9rem;
left: 9rem;
-inset-36 top: -9rem;
right: -9rem;
bottom: -9rem;
left: -9rem;
inset-x-36 left: 9rem;
right: 9rem;
-inset-x-36 left: -9rem;
right: -9rem;
inset-y-36 top: 9rem;
bottom: 9rem;
-inset-y-36 top: -9rem;
bottom: -9rem;
top-36 top: 9rem;
-top-36 top: -9rem;
right-36 right: 9rem;
-right-36 right: -9rem;
bottom-36 bottom: 9rem;
-bottom-36 bottom: -9rem;
left-36 left: 9rem;
-left-36 left: -9rem;
inset-40 top: 10rem;
right: 10rem;
bottom: 10rem;
left: 10rem;
-inset-40 top: -10rem;
right: -10rem;
bottom: -10rem;
left: -10rem;
inset-x-40 left: 10rem;
right: 10rem;
-inset-x-40 left: -10rem;
right: -10rem;
inset-y-40 top: 10rem;
bottom: 10rem;
-inset-y-40 top: -10rem;
bottom: -10rem;
top-40 top: 10rem;
-top-40 top: -10rem;
right-40 right: 10rem;
-right-40 right: -10rem;
bottom-40 bottom: 10rem;
-bottom-40 bottom: -10rem;
left-40 left: 10rem;
-left-40 left: -10rem;
inset-44 top: 11rem;
right: 11rem;
bottom: 11rem;
left: 11rem;
-inset-44 top: -11rem;
right: -11rem;
bottom: -11rem;
left: -11rem;
inset-x-44 left: 11rem;
right: 11rem;
-inset-x-44 left: -11rem;
right: -11rem;
inset-y-44 top: 11rem;
bottom: 11rem;
-inset-y-44 top: -11rem;
bottom: -11rem;
top-44 top: 11rem;
-top-44 top: -11rem;
right-44 right: 11rem;
-right-44 right: -11rem;
bottom-44 bottom: 11rem;
-bottom-44 bottom: -11rem;
left-44 left: 11rem;
-left-44 left: -11rem;
inset-48 top: 12rem;
right: 12rem;
bottom: 12rem;
left: 12rem;
-inset-48 top: -12rem;
right: -12rem;
bottom: -12rem;
left: -12rem;
inset-x-48 left: 12rem;
right: 12rem;
-inset-x-48 left: -12rem;
right: -12rem;
inset-y-48 top: 12rem;
bottom: 12rem;
-inset-y-48 top: -12rem;
bottom: -12rem;
top-48 top: 12rem;
-top-48 top: -12rem;
right-48 right: 12rem;
-right-48 right: -12rem;
bottom-48 bottom: 12rem;
-bottom-48 bottom: -12rem;
left-48 left: 12rem;
-left-48 left: -12rem;
inset-52 top: 13rem;
right: 13rem;
bottom: 13rem;
left: 13rem;
-inset-52 top: -13rem;
right: -13rem;
bottom: -13rem;
left: -13rem;
inset-x-52 left: 13rem;
right: 13rem;
-inset-x-52 left: -13rem;
right: -13rem;
inset-y-52 top: 13rem;
bottom: 13rem;
-inset-y-52 top: -13rem;
bottom: -13rem;
top-52 top: 13rem;
-top-52 top: -13rem;
right-52 right: 13rem;
-right-52 right: -13rem;
bottom-52 bottom: 13rem;
-bottom-52 bottom: -13rem;
left-52 left: 13rem;
-left-52 left: -13rem;
inset-56 top: 14rem;
right: 14rem;
bottom: 14rem;
left: 14rem;
-inset-56 top: -14rem;
right: -14rem;
bottom: -14rem;
left: -14rem;
inset-x-56 left: 14rem;
right: 14rem;
-inset-x-56 left: -14rem;
right: -14rem;
inset-y-56 top: 14rem;
bottom: 14rem;
-inset-y-56 top: -14rem;
bottom: -14rem;
top-56 top: 14rem;
-top-56 top: -14rem;
right-56 right: 14rem;
-right-56 right: -14rem;
bottom-56 bottom: 14rem;
-bottom-56 bottom: -14rem;
left-56 left: 14rem;
-left-56 left: -14rem;
inset-60 top: 15rem;
right: 15rem;
bottom: 15rem;
left: 15rem;
-inset-60 top: -15rem;
right: -15rem;
bottom: -15rem;
left: -15rem;
inset-x-60 left: 15rem;
right: 15rem;
-inset-x-60 left: -15rem;
right: -15rem;
inset-y-60 top: 15rem;
bottom: 15rem;
-inset-y-60 top: -15rem;
bottom: -15rem;
top-60 top: 15rem;
-top-60 top: -15rem;
right-60 right: 15rem;
-right-60 right: -15rem;
bottom-60 bottom: 15rem;
-bottom-60 bottom: -15rem;
left-60 left: 15rem;
-left-60 left: -15rem;
inset-64 top: 16rem;
right: 16rem;
bottom: 16rem;
left: 16rem;
-inset-64 top: -16rem;
right: -16rem;
bottom: -16rem;
left: -16rem;
inset-x-64 left: 16rem;
right: 16rem;
-inset-x-64 left: -16rem;
right: -16rem;
inset-y-64 top: 16rem;
bottom: 16rem;
-inset-y-64 top: -16rem;
bottom: -16rem;
top-64 top: 16rem;
-top-64 top: -16rem;
right-64 right: 16rem;
-right-64 right: -16rem;
bottom-64 bottom: 16rem;
-bottom-64 bottom: -16rem;
left-64 left: 16rem;
-left-64 left: -16rem;
inset-72 top: 18rem;
right: 18rem;
bottom: 18rem;
left: 18rem;
-inset-72 top: -18rem;
right: -18rem;
bottom: -18rem;
left: -18rem;
inset-x-72 left: 18rem;
right: 18rem;
-inset-x-72 left: -18rem;
right: -18rem;
inset-y-72 top: 18rem;
bottom: 18rem;
-inset-y-72 top: -18rem;
bottom: -18rem;
top-72 top: 18rem;
-top-72 top: -18rem;
right-72 right: 18rem;
-right-72 right: -18rem;
bottom-72 bottom: 18rem;
-bottom-72 bottom: -18rem;
left-72 left: 18rem;
-left-72 left: -18rem;
inset-80 top: 20rem;
right: 20rem;
bottom: 20rem;
left: 20rem;
-inset-80 top: -20rem;
right: -20rem;
bottom: -20rem;
left: -20rem;
inset-x-80 left: 20rem;
right: 20rem;
-inset-x-80 left: -20rem;
right: -20rem;
inset-y-80 top: 20rem;
bottom: 20rem;
-inset-y-80 top: -20rem;
bottom: -20rem;
top-80 top: 20rem;
-top-80 top: -20rem;
right-80 right: 20rem;
-right-80 right: -20rem;
bottom-80 bottom: 20rem;
-bottom-80 bottom: -20rem;
left-80 left: 20rem;
-left-80 left: -20rem;
inset-96 top: 24rem;
right: 24rem;
bottom: 24rem;
left: 24rem;
-inset-96 top: -24rem;
right: -24rem;
bottom: -24rem;
left: -24rem;
inset-x-96 left: 24rem;
right: 24rem;
-inset-x-96 left: -24rem;
right: -24rem;
inset-y-96 top: 24rem;
bottom: 24rem;
-inset-y-96 top: -24rem;
bottom: -24rem;
top-96 top: 24rem;
-top-96 top: -24rem;
right-96 right: 24rem;
-right-96 right: -24rem;
bottom-96 bottom: 24rem;
-bottom-96 bottom: -24rem;
left-96 left: 24rem;
-left-96 left: -24rem;
inset-auto top: auto;
right: auto;
bottom: auto;
left: auto;
inset-1/2 top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
inset-1/3 top: 33.333333%;
right: 33.333333%;
bottom: 33.333333%;
left: 33.333333%;
inset-2/3 top: 66.666667%;
right: 66.666667%;
bottom: 66.666667%;
left: 66.666667%;
inset-1/4 top: 25%;
right: 25%;
bottom: 25%;
left: 25%;
inset-2/4 top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
inset-3/4 top: 75%;
right: 75%;
bottom: 75%;
left: 75%;
inset-full top: 100%;
right: 100%;
bottom: 100%;
left: 100%;
-inset-1/2 top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
-inset-1/3 top: -33.333333%;
right: -33.333333%;
bottom: -33.333333%;
left: -33.333333%;
-inset-2/3 top: -66.666667%;
right: -66.666667%;
bottom: -66.666667%;
left: -66.666667%;
-inset-1/4 top: -25%;
right: -25%;
bottom: -25%;
left: -25%;
-inset-2/4 top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
-inset-3/4 top: -75%;
right: -75%;
bottom: -75%;
left: -75%;
-inset-full top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
inset-x-auto left: auto;
right: auto;
inset-x-1/2 left: 50%;
right: 50%;
inset-x-1/3 left: 33.333333%;
right: 33.333333%;
inset-x-2/3 left: 66.666667%;
right: 66.666667%;
inset-x-1/4 left: 25%;
right: 25%;
inset-x-2/4 left: 50%;
right: 50%;
inset-x-3/4 left: 75%;
right: 75%;
inset-x-full left: 100%;
right: 100%;
-inset-x-1/2 left: -50%;
right: -50%;
-inset-x-1/3 left: -33.333333%;
right: -33.333333%;
-inset-x-2/3 left: -66.666667%;
right: -66.666667%;
-inset-x-1/4 left: -25%;
right: -25%;
-inset-x-2/4 left: -50%;
right: -50%;
-inset-x-3/4 left: -75%;
right: -75%;
-inset-x-full left: -100%;
right: -100%;
inset-y-auto top: auto;
bottom: auto;
inset-y-1/2 top: 50%;
bottom: 50%;
inset-y-1/3 top: 33.333333%;
bottom: 33.333333%;
inset-y-2/3 top: 66.666667%;
bottom: 66.666667%;
inset-y-1/4 top: 25%;
bottom: 25%;
inset-y-2/4 top: 50%;
bottom: 50%;
inset-y-3/4 top: 75%;
bottom: 75%;
inset-y-full top: 100%;
bottom: 100%;
-inset-y-1/2 top: -50%;
bottom: -50%;
-inset-y-1/3 top: -33.333333%;
bottom: -33.333333%;
-inset-y-2/3 top: -66.666667%;
bottom: -66.666667%;
-inset-y-1/4 top: -25%;
bottom: -25%;
-inset-y-2/4 top: -50%;
bottom: -50%;
-inset-y-3/4 top: -75%;
bottom: -75%;
-inset-y-full top: -100%;
bottom: -100%;
top-auto top: auto;
top-1/2 top: 50%;
top-1/3 top: 33.333333%;
top-2/3 top: 66.666667%;
top-1/4 top: 25%;
top-2/4 top: 50%;
top-3/4 top: 75%;
top-full top: 100%;
-top-1/2 top: -50%;
-top-1/3 top: -33.333333%;
-top-2/3 top: -66.666667%;
-top-1/4 top: -25%;
-top-2/4 top: -50%;
-top-3/4 top: -75%;
-top-full top: -100%;
right-auto right: auto;
right-1/2 right: 50%;
right-1/3 right: 33.333333%;
right-2/3 right: 66.666667%;
right-1/4 right: 25%;
right-2/4 right: 50%;
right-3/4 right: 75%;
right-full right: 100%;
-right-1/2 right: -50%;
-right-1/3 right: -33.333333%;
-right-2/3 right: -66.666667%;
-right-1/4 right: -25%;
-right-2/4 right: -50%;
-right-3/4 right: -75%;
-right-full right: -100%;
bottom-auto bottom: auto;
bottom-1/2 bottom: 50%;
bottom-1/3 bottom: 33.333333%;
bottom-2/3 bottom: 66.666667%;
bottom-1/4 bottom: 25%;
bottom-2/4 bottom: 50%;
bottom-3/4 bottom: 75%;
bottom-full bottom: 100%;
-bottom-1/2 bottom: -50%;
-bottom-1/3 bottom: -33.333333%;
-bottom-2/3 bottom: -66.666667%;
-bottom-1/4 bottom: -25%;
-bottom-2/4 bottom: -50%;
-bottom-3/4 bottom: -75%;
-bottom-full bottom: -100%;
left-auto left: auto;
left-1/2 left: 50%;
left-1/3 left: 33.333333%;
left-2/3 left: 66.666667%;
left-1/4 left: 25%;
left-2/4 left: 50%;
left-3/4 left: 75%;
left-full left: 100%;
-left-1/2 left: -50%;
-left-1/3 left: -33.333333%;
-left-2/3 left: -66.666667%;
-left-1/4 left: -25%;
-left-2/4 left: -50%;
-left-3/4 left: -75%;
-left-full left: -100%;

使い方

{top|right|bottom|left|inset}-0 ユーティリティを使って、絶対配置された要素を、最も近い位置にある親要素のいずれかのエッジに固定します。

Tailwind の padding や margin ユーティリティーと組み合わせることで、絶対配置された要素を正確にコントロールするために必要な全ての機能を利用することができるでしょう。

Image from Gyazo

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">1</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">2</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">3</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 left-0 w-16 ...">4</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-0 ...">5</div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">6</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute top-0 right-0 h-16 w-16 ...">7</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 right-0 h-16 w-16 ...">8</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute bottom-0 left-0 h-16 w-16 ...">9</div>
</div>

レスポンシブ

特定のブレークポイントでのみ要素を配置するには、既存の位置決めユーティリティーに{screen}:というプレフィックスを追加します。例えば、要素にmd:inset-y-0というクラスを追加すると、中程度のスクリーンサイズ以上でinset-y-0ユーティリティが適用されます。

<div class="relative h-32 ...">
  <div class="absolute inset-0 md:inset-y-0 ..."></div>
</div>

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


カスタマイズ

Top / Right / Bottom /Left

デフォルトでは、Tailwind は、デフォルトのスペーシング・スケールautofullのほか、いくつかの追加の分数値を組み合わせた、トップ/ライト/ボトム/レフト/インセット・ユーティリティを提供しています。

これらを変更、追加、削除するには、tailwind.config.jsファイルの theme.insetセクションを編集します。

tailwind.config.js
module.exports = {
  theme: {
    inset: {
      0: 0,
      // ...
+     64: "16rem",
-     "1/5": "20%",
    },
  },
}

負の値

Tailwind のネガティブマージンクラスと同じ形式の、ネガティブな top/right/bottom/left クラスを追加したい場合は、設定ファイルのキーの前にダッシュを付けてください。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      inset: {
+       "-16": "-4rem",
      },
    },
  },
}

Tailwind は賢いので、先頭のダッシュを見て-top-16のようなクラスを生成しますが、予想されるようなtop--16ではありません。

バリアント

デフォルトでは、top、right、bottom、left、inset の各ユーティリティに対して、レスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルの variants セクションにあるinsetプロパティを変更することで、トップ、右、下、左、インセットの各ユーティリティに生成されるバリアントをコントロールすることができます。

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

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

無効化

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

module.exports = {
  corePlugins: {
    // ...
+    inset: false,
  },
}

Discussion

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