Tailwind CSS 主页
  1. 布局
  2. 顶部/右侧/底部/左侧

快速参考

类
属性
inset-0inset: 0px;
inset-x-0left: 0px; right: 0px;
inset-y-0top: 0px; bottom: 0px;
start-0inset-inline-start: 0px;
end-0inset-inline-end: 0px;
top-0top: 0px;
right-0right: 0px;
bottom-0bottom: 0px;
left-0left: 0px;
inset-pxinset: 1px;
inset-x-pxleft: 1px; right: 1px;
inset-y-pxtop: 1px; bottom: 1px;
start-pxinset-inline-start: 1px;
end-pxinset-inline-end: 1px;
top-pxtop: 1px;
right-pxright: 1px;
bottom-pxbottom: 1px;
left-pxleft: 1px;
inset-0.5inset: 0.125rem; /* 2px */
inset-x-0.5left: 0.125rem; /* 2px */ right: 0.125rem; /* 2px */
inset-y-0.5top: 0.125rem; /* 2px */ bottom: 0.125rem; /* 2px */
start-0.5inset-inline-start: 0.125rem; /* 2px */
end-0.5inset-inline-end: 0.125rem; /* 2px */
top-0.5top: 0.125rem; /* 2px */
right-0.5right: 0.125rem; /* 2px */
bottom-0.5bottom: 0.125rem; /* 2px */
left-0.5left: 0.125rem; /* 2px */
inset-1inset: 0.25rem; /* 4px */
inset-x-1left: 0.25rem; /* 4px */ right: 0.25rem; /* 4px */
内边距-y-1顶部：0.25rem; /* 4px */ 底部：0.25rem; /* 4px */
开始-1内边距-内联开始：0.25rem; /* 4px */
结束-1内边距-内联结束：0.25rem; /* 4px */
顶部-1顶部：0.25rem; /* 4px */
右侧-1右侧：0.25rem; /* 4px */
底部-1底部：0.25rem; /* 4px */
左侧-1左侧：0.25rem; /* 4px */
内边距-1.5内边距：0.375rem; /* 6px */
内边距-x-1.5左侧：0.375rem; /* 6px */ 右侧：0.375rem; /* 6px */
内边距-y-1.5顶部：0.375rem; /* 6px */ 底部：0.375rem; /* 6px */
开始-1.5内边距-内联开始：0.375rem; /* 6px */
结束-1.5内边距-内联结束：0.375rem; /* 6px */
顶部-1.5顶部：0.375rem; /* 6px */
右侧-1.5右侧：0.375rem; /* 6px */
底部-1.5底部：0.375rem; /* 6px */
左侧-1.5左侧：0.375rem; /* 6px */
内边距-2内边距：0.5rem; /* 8px */
内边距-x-2左侧：0.5rem; /* 8px */ 右侧：0.5rem; /* 8px */
内边距-y-2顶部：0.5rem; /* 8px */ 底部：0.5rem; /* 8px */
开始-2内边距-内联开始：0.5rem; /* 8px */
结束-2内边距-内联结束：0.5rem; /* 8px */
顶部-2顶部：0.5rem; /* 8px */
右侧-2右侧：0.5rem; /* 8px */
bottom-2bottom: 0.5rem; /* 8px */
left-2left: 0.5rem; /* 8px */
inset-2.5inset: 0.625rem; /* 10px */
inset-x-2.5left: 0.625rem; /* 10px */ right: 0.625rem; /* 10px */
inset-y-2.5top: 0.625rem; /* 10px */ bottom: 0.625rem; /* 10px */
start-2.5inset-inline-start: 0.625rem; /* 10px */
end-2.5inset-inline-end: 0.625rem; /* 10px */
top-2.5top: 0.625rem; /* 10px */
right-2.5right: 0.625rem; /* 10px */
bottom-2.5bottom: 0.625rem; /* 10px */
left-2.5left: 0.625rem; /* 10px */
inset-3inset: 0.75rem; /* 12px */
inset-x-3left: 0.75rem; /* 12px */ right: 0.75rem; /* 12px */
inset-y-3top: 0.75rem; /* 12px */ bottom: 0.75rem; /* 12px */
start-3inset-inline-start: 0.75rem; /* 12px */
end-3inset-inline-end: 0.75rem; /* 12px */
top-3top: 0.75rem; /* 12px */
right-3right: 0.75rem; /* 12px */
bottom-3bottom: 0.75rem; /* 12px */
left-3left: 0.75rem; /* 12px */
inset-3.5inset: 0.875rem; /* 14px */
inset-x-3.5left: 0.875rem; /* 14px */ right: 0.875rem; /* 14px */
inset-y-3.5top: 0.875rem; /* 14px */ bottom: 0.875rem; /* 14px */
start-3.5inset-inline-start: 0.875rem; /* 14px */
end-3.5inset-inline-end: 0.875rem; /* 14px */
top-3.5顶部：0.875rem; /* 14px */
右侧-3.5右侧：0.875rem; /* 14px */
底部-3.5底部：0.875rem; /* 14px */
左侧-3.5左侧：0.875rem; /* 14px */
内嵌-4内嵌：1rem; /* 16px */
内嵌-x-4左侧：1rem; /* 16px */右侧：1rem; /* 16px */
内嵌-y-4顶部：1rem; /* 16px */底部：1rem; /* 16px */
开始-4内嵌内联开始：1rem; /* 16px */
结束-4内嵌内联结束：1rem; /* 16px */
顶部-4顶部：1rem; /* 16px */
右侧-4右侧：1rem; /* 16px */
底部-4底部：1rem; /* 16px */
左侧-4左侧：1rem; /* 16px */
内嵌-5内嵌：1.25rem; /* 20px */
内嵌-x-5左侧：1.25rem; /* 20px */右侧：1.25rem; /* 20px */
内嵌-y-5顶部：1.25rem; /* 20px */底部：1.25rem; /* 20px */
开始-5内嵌内联开始：1.25rem; /* 20px */
结束-5内嵌内联结束：1.25rem; /* 20px */
顶部-5顶部：1.25rem; /* 20px */
右侧-5右侧：1.25rem; /* 20px */
底部-5底部：1.25rem; /* 20px */
左侧-5左侧：1.25rem; /* 20px */
内嵌-6内嵌：1.5rem; /* 24px */
内嵌-x-6左侧：1.5rem; /* 24px */右侧：1.5rem; /* 24px */
内嵌-y-6上: 1.5rem; /* 24px */ 下: 1.5rem; /* 24px */
start-6内联起始插入: 1.5rem; /* 24px */
end-6内联结束插入: 1.5rem; /* 24px */
top-6上: 1.5rem; /* 24px */
right-6右: 1.5rem; /* 24px */
bottom-6下: 1.5rem; /* 24px */
left-6左: 1.5rem; /* 24px */
inset-7插入: 1.75rem; /* 28px */
inset-x-7左: 1.75rem; /* 28px */ 右: 1.75rem; /* 28px */
inset-y-7上: 1.75rem; /* 28px */ 下: 1.75rem; /* 28px */
start-7内联起始插入: 1.75rem; /* 28px */
end-7内联结束插入: 1.75rem; /* 28px */
top-7上: 1.75rem; /* 28px */
right-7右: 1.75rem; /* 28px */
bottom-7下: 1.75rem; /* 28px */
left-7左: 1.75rem; /* 28px */
inset-8插入: 2rem; /* 32px */
inset-x-8左: 2rem; /* 32px */ 右: 2rem; /* 32px */
inset-y-8上: 2rem; /* 32px */ 下: 2rem; /* 32px */
start-8内联起始插入: 2rem; /* 32px */
end-8内联结束插入: 2rem; /* 32px */
top-8上: 2rem; /* 32px */
right-8右: 2rem; /* 32px */
bottom-8bottom: 2rem; /* 32px */
left-8left: 2rem; /* 32px */
inset-9inset: 2.25rem; /* 36px */
inset-x-9left: 2.25rem; /* 36px */ right: 2.25rem; /* 36px */
inset-y-9top: 2.25rem; /* 36px */ bottom: 2.25rem; /* 36px */
start-9inset-inline-start: 2.25rem; /* 36px */
end-9inset-inline-end: 2.25rem; /* 36px */
top-9top: 2.25rem; /* 36px */
right-9right: 2.25rem; /* 36px */
bottom-9bottom: 2.25rem; /* 36px */
left-9left: 2.25rem; /* 36px */
inset-10inset: 2.5rem; /* 40px */
inset-x-10left: 2.5rem; /* 40px */ right: 2.5rem; /* 40px */
inset-y-10top: 2.5rem; /* 40px */ bottom: 2.5rem; /* 40px */
start-10inset-inline-start: 2.5rem; /* 40px */
end-10inset-inline-end: 2.5rem; /* 40px */
top-10top: 2.5rem; /* 40px */
right-10right: 2.5rem; /* 40px */
bottom-10bottom: 2.5rem; /* 40px */
left-10left: 2.5rem; /* 40px */
inset-11inset: 2.75rem; /* 44px */
inset-x-11left: 2.75rem; /* 44px */ right: 2.75rem; /* 44px */
inset-y-11top: 2.75rem; /* 44px */ bottom: 2.75rem; /* 44px */
start-11inset-inline-start: 2.75rem; /* 44px */
end-11inset-inline-end: 2.75rem; /* 44px */
top-11top: 2.75rem; /* 44px */
right-11right: 2.75rem; /* 44px */
bottom-11bottom: 2.75rem; /* 44px */
left-11left: 2.75rem; /* 44px */
inset-12inset: 3rem; /* 48px */
inset-x-12left: 3rem; /* 48px */ right: 3rem; /* 48px */
inset-y-12top: 3rem; /* 48px */ bottom: 3rem; /* 48px */
start-12inset-inline-start: 3rem; /* 48px */
end-12inset-inline-end: 3rem; /* 48px */
top-12top: 3rem; /* 48px */
right-12right: 3rem; /* 48px */
bottom-12bottom: 3rem; /* 48px */
left-12left: 3rem; /* 48px */
inset-14inset: 3.5rem; /* 56px */
inset-x-14left: 3.5rem; /* 56px */ right: 3.5rem; /* 56px */
inset-y-14top: 3.5rem; /* 56px */ bottom: 3.5rem; /* 56px */
start-14inset-inline-start: 3.5rem; /* 56px */
end-14inset-inline-end: 3.5rem; /* 56px */
top-14top: 3.5rem; /* 56px */
right-14right: 3.5rem; /* 56px */
bottom-14bottom: 3.5rem; /* 56px */
left-14left: 3.5rem; /* 56px */
inset-16inset: 4rem; /* 64px */
inset-x-16left: 4rem; /* 64px */ right: 4rem; /* 64px */
inset-y-16top: 4rem; /* 64px */ bottom: 4rem; /* 64px */
start-16inset-inline-start: 4rem; /* 64px */
end-16inset-inline-end: 4rem; /* 64px */
top-16top: 4rem; /* 64px */
right-16right: 4rem; /* 64px */
bottom-16bottom: 4rem; /* 64px */
left-16left: 4rem; /* 64px */
inset-20inset: 5rem; /* 80px */
inset-x-20left: 5rem; /* 80px */ right: 5rem; /* 80px */
inset-y-20top: 5rem; /* 80px */ bottom: 5rem; /* 80px */
start-20inset-inline-start: 5rem; /* 80px */
end-20inset-inline-end: 5rem; /* 80px */
top-20top: 5rem; /* 80px */
right-20right: 5rem; /* 80px */
bottom-20bottom: 5rem; /* 80px */
left-20left: 5rem; /* 80px */
inset-24inset: 6rem; /* 96px */
inset-x-24left: 6rem; /* 96px */ right: 6rem; /* 96px */
inset-y-24top: 6rem; /* 96px */ bottom: 6rem; /* 96px */
start-24inset-inline-start: 6rem; /* 96px */
end-24inset-inline-end: 6rem; /* 96px */
top-24top: 6rem; /* 96px */
right-24right: 6rem; /* 96px */
bottom-24bottom: 6rem; /* 96px */
left-24left: 6rem; /* 96px */
inset-28inset: 7rem; /* 112px */
inset-x-28left: 7rem; /* 112px */ right: 7rem; /* 112px */
inset-y-28top: 7rem; /* 112px */ bottom: 7rem; /* 112px */
start-28inset-inline-start: 7rem; /* 112px */
end-28inset-inline-end: 7rem; /* 112px */
top-28top: 7rem; /* 112px */
right-28right: 7rem; /* 112px */
bottom-28bottom: 7rem; /* 112px */
left-28left: 7rem; /* 112px */
inset-32inset: 8rem; /* 128px */
inset-x-32left: 8rem; /* 128px */ right: 8rem; /* 128px */
inset-y-32top: 8rem; /* 128px */ bottom: 8rem; /* 128px */
start-32inset-inline-start: 8rem; /* 128px */
end-32inset-inline-end: 8rem; /* 128px */
top-32top: 8rem; /* 128px */
right-32right: 8rem; /* 128px */
bottom-32bottom: 8rem; /* 128px */
left-32left: 8rem; /* 128px */
inset-36inset: 9rem; /* 144px */
inset-x-36left: 9rem; /* 144px */ right: 9rem; /* 144px */
inset-y-36top: 9rem; /* 144px */ bottom: 9rem; /* 144px */
start-36inset-inline-start: 9rem; /* 144px */
end-36inset-inline-end: 9rem; /* 144px */
top-36top: 9rem; /* 144px */
right-36right: 9rem; /* 144px */
bottom-36bottom: 9rem; /* 144px */
left-36left: 9rem; /* 144px */
inset-40inset: 10rem; /* 160px */
inset-x-40left: 10rem; /* 160px */ right: 10rem; /* 160px */
inset-y-40top: 10rem; /* 160px */ bottom: 10rem; /* 160px */
start-40inset-inline-start: 10rem; /* 160px */
end-40inset-inline-end: 10rem; /* 160px */
top-40top: 10rem; /* 160px */
right-40right: 10rem; /* 160px */
bottom-40bottom: 10rem; /* 160px */
left-40left: 10rem; /* 160px */
inset-44inset: 11rem; /* 176px */
inset-x-44left: 11rem; /* 176px */ right: 11rem; /* 176px */
inset-y-44top: 11rem; /* 176px */ bottom: 11rem; /* 176px */
start-44inset-inline-start: 11rem; /* 176px */
end-44inset-inline-end: 11rem; /* 176px */
top-44top: 11rem; /* 176px */
right-44right: 11rem; /* 176px */
bottom-44bottom: 11rem; /* 176px */
left-44left: 11rem; /* 176px */
inset-48inset: 12rem; /* 192px */
inset-x-48left: 12rem; /* 192px */ right: 12rem; /* 192px */
inset-y-48top: 12rem; /* 192px */ bottom: 12rem; /* 192px */
start-48inset-inline-start: 12rem; /* 192px */
end-48inset-inline-end: 12rem; /* 192px */
top-48top: 12rem; /* 192px */
right-48right: 12rem; /* 192px */
bottom-48bottom: 12rem; /* 192px */
left-48left: 12rem; /* 192px */
inset-52inset: 13rem; /* 208px */
inset-x-52left: 13rem; /* 208px */ right: 13rem; /* 208px */
inset-y-52top: 13rem; /* 208px */ bottom: 13rem; /* 208px */
start-52inset-inline-start: 13rem; /* 208px */
end-52inset-inline-end: 13rem; /* 208px */
top-52top: 13rem; /* 208px */
right-52right: 13rem; /* 208px */
bottom-52bottom: 13rem; /* 208px */
left-52left: 13rem; /* 208px */
inset-56inset: 14rem; /* 224px */
inset-x-56left: 14rem; /* 224px */ right: 14rem; /* 224px */
inset-y-56top: 14rem; /* 224px */ bottom: 14rem; /* 224px */
start-56inset-inline-start: 14rem; /* 224px */
end-56inset-inline-end: 14rem; /* 224px */
top-56top: 14rem; /* 224px */
right-56right: 14rem; /* 224px */
bottom-56bottom: 14rem; /* 224px */
left-56left: 14rem; /* 224px */
inset-60inset: 15rem; /* 240px */
inset-x-60left: 15rem; /* 240px */ right: 15rem; /* 240px */
inset-y-60top: 15rem; /* 240px */ bottom: 15rem; /* 240px */
start-60inset-inline-start: 15rem; /* 240px */
end-60inset-inline-end: 15rem; /* 240px */
top-60top: 15rem; /* 240px */
right-60right: 15rem; /* 240px */
bottom-60bottom: 15rem; /* 240px */
left-60left: 15rem; /* 240px */
inset-64inset: 16rem; /* 256px */
inset-x-64left: 16rem; /* 256px */ right: 16rem; /* 256px */
inset-y-64top: 16rem; /* 256px */ bottom: 16rem; /* 256px */
start-64inset-inline-start: 16rem; /* 256px */
end-64inset-inline-end: 16rem; /* 256px */
top-64top: 16rem; /* 256px */
right-64right: 16rem; /* 256px */
bottom-64bottom: 16rem; /* 256px */
left-64left: 16rem; /* 256px */
inset-72inset: 18rem; /* 288px */
inset-x-72left: 18rem; /* 288px */ right: 18rem; /* 288px */
inset-y-72top: 18rem; /* 288px */ bottom: 18rem; /* 288px */
start-72inset-inline-start: 18rem; /* 288px */
end-72inset-inline-end: 18rem; /* 288px */
top-72top: 18rem; /* 288px */
right-72right: 18rem; /* 288px */
bottom-72bottom: 18rem; /* 288px */
left-72left: 18rem; /* 288px */
inset-80inset: 20rem; /* 320px */
inset-x-80left: 20rem; /* 320px */ right: 20rem; /* 320px */
inset-y-80top: 20rem; /* 320px */ bottom: 20rem; /* 320px */
start-80inset-inline-start: 20rem; /* 320px */
end-80inset-inline-end: 20rem; /* 320px */
top-80top: 20rem; /* 320px */
right-80right: 20rem; /* 320px */
bottom-80bottom: 20rem; /* 320px */
left-80left: 20rem; /* 320px */
inset-96inset: 24rem; /* 384px */
inset-x-96left: 24rem; /* 384px */ right: 24rem; /* 384px */
inset-y-96top: 24rem; /* 384px */ bottom: 24rem; /* 384px */
start-96inset-inline-start: 24rem; /* 384px */
end-96inset-inline-end: 24rem; /* 384px */
top-96top: 24rem; /* 384px */
right-96right: 24rem; /* 384px */
bottom-96bottom: 24rem; /* 384px */
left-96left: 24rem; /* 384px */
inset-autoinset: auto;
inset-1/2inset: 50%;
inset-1/3inset: 33.333333%;
inset-2/3inset: 66.666667%;
inset-1/4inset: 25%;
inset-2/4inset: 50%;
inset-3/4inset: 75%;
inset-fullinset: 100%;
inset-x-autoleft: auto; right: auto;
inset-x-1/2left: 50%; right: 50%;
inset-x-1/3left: 33.333333%; right: 33.333333%;
inset-x-2/3left: 66.666667%; right: 66.666667%;
inset-x-1/4left: 25%; right: 25%;
inset-x-2/4left: 50%; right: 50%;
inset-x-3/4left: 75%; right: 75%;
inset-x-fullleft: 100%; right: 100%;
inset-y-autotop: auto; bottom: auto;
inset-y-1/2top: 50%; bottom: 50%;
inset-y-1/3top: 33.333333%; bottom: 33.333333%;
inset-y-2/3top: 66.666667%; bottom: 66.666667%;
inset-y-1/4top: 25%; bottom: 25%;
inset-y-2/4top: 50%; bottom: 50%;
inset-y-3/4top: 75%; bottom: 75%;
inset-y-fulltop: 100%; bottom: 100%;
start-autoinset-inline-start: auto;
start-1/2inset-inline-start: 50%;
start-1/3inset-inline-start: 33.333333%;
start-2/3inset-inline-start: 66.666667%;
start-1/4inset-inline-start: 25%;
start-2/4inset-inline-start: 50%;
start-3/4inset-inline-start: 75%;
start-fullinset-inline-start: 100%;
end-autoinset-inline-end: auto;
end-1/2inset-inline-end: 50%;
end-1/3inset-inline-end: 33.333333%;
end-2/3inset-inline-end: 66.666667%;
end-1/4inset-inline-end: 25%;
end-2/4inset-inline-end: 50%;
end-3/4inset-inline-end: 75%;
end-fullinset-inline-end: 100%;
top-autotop: auto;
top-1/2顶部：50%；
顶部-1/3顶部：33.333333%；
顶部-2/3顶部：66.666667%；
顶部-1/4顶部：25%；
顶部-2/4顶部：50%；
顶部-3/4顶部：75%；
顶部-全部顶部：100%；
右侧-自动右侧：自动；
右侧-1/2右侧：50%；
右侧-1/3右侧：33.333333%；
右侧-2/3右侧：66.666667%；
右侧-1/4右侧：25%；
右侧-2/4右侧：50%；
右侧-3/4右侧：75%；
右侧-全部右侧：100%；
底部-自动底部：自动；
底部-1/2底部：50%；
底部-1/3底部：33.333333%；
底部-2/3底部：66.666667%；
底部-1/4底部：25%；
底部-2/4底部：50%；
底部-3/4底部：75%；
底部-全部底部：100%；
左侧-自动左侧：自动；
左侧-1/2左侧：50%；
左侧-1/3左侧：33.333333%；
左侧-2/3左侧：66.666667%；
左侧-1/4左侧：25%；
左侧-2/4左侧：50%；
左侧-3/4左侧：75%；
左侧-全部左侧：100%；

基本用法

放置定位元素

使用 {top|right|bottom|left|inset}-{size} 实用程序设置 定位元素 的水平或垂直位置。

01
02
03
04
05
06
07
08
09
<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ...">
  <div class="absolute left-0 top-0 h-16 w-16 ...">01</div>
</div>

<!-- Span top edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 top-0 h-16 ...">02</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 ...">03</div>
</div>

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

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

<!-- Span right edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-y-0 right-0 w-16 ...">06</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 ...">07</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ...">
  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</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 ...">09</div>
</div>

使用负值

要使用负的 top/right/bottom/left 值，请在类名前加上一个连字符，以将其转换为负值。

<div class="relative h-32 w-32 ...">
  <div class="absolute h-14 w-14 -left-4 -top-4 ..."></div>
</div>

使用逻辑属性

使用 start-* 和 end-* 实用程序设置 inset-inline-start 和 inset-inline-end 逻辑属性，根据文本方向映射到左侧或右侧。

从左到右

从右到左

<div dir="ltr">
  <div class="relative h-32 w-32 ...">
    <div class="absolute h-14 w-14 top-0 start-0 ..."></div>
  </div>
<div>

<div dir="rtl">
  <div class="relative h-32 w-32 ...">
    <div class="absolute h-14 w-14 top-0 start-0 ..."></div>
  </div>
<div>

为了获得更多控制，您还可以使用 LTR 和 RTL 修改器，根据当前文本方向有条件地应用特定样式。

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修改器在不同状态下有条件地应用实用程序类。例如，使用 hover:top-6 仅在悬停时应用 top-6 实用程序。

<div class="top-4 hover:top-6">
  <!-- ... -->
</div>

有关所有可用状态修改器的完整列表，请查看 悬停、焦点和其他状态 文档。

断点和媒体查询

您还可以使用变体修改器来定位媒体查询，如响应式断点、暗模式、更喜欢减少运动等。例如，使用 md:top-6 仅在中型屏幕及以上大小应用 top-6 实用程序。

<div class="top-4 md:top-6">
  <!-- ... -->
</div>

要了解更多信息，请查看 响应式设计、暗模式 和 其他媒体查询修改器 的文档。

使用自定义值

自定义主题

默认情况下，Tailwind 提供了 top/right/bottom/left/inset 实用程序，用于组合 默认间距比例、auto、full 以及一些额外的小数部分值。

你可以通过编辑 tailwind.config.js 文件中的 theme.spacing 或 theme.extend.spacing 来自定义间距比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '3px': '3px',
      }
    }
  }
}

或者，你也可以通过编辑 tailwind.config.js 文件中的 theme.inset 或 theme.extend.inset 来自定义 top/right/bottom/left/inset 比例。

tailwind.config.js
module.exports = {
  theme: {
    extend: {
      inset: {
        '3px': '3px',
      }
    }
  }
}

在 主题自定义 文档中了解有关自定义默认主题的更多信息。

任意值

如果你需要使用一次性的 top/right/bottom/left 值，而该值不适合包含在主题中，请使用方括号使用任意值动态生成属性。

<div class="top-[3px]">
  <!-- ... -->
</div>

在任意值文档中了解有关任意值支持的更多信息。