Documentación offline Tailwind CSS main
/ ó ⌘K
por @raupulus

top / right / bottom / left

main Ver versión oficial en línea Licencia MITDescargado el 2026-09-15 Bundle .md (1.3 MB) ↓

En esta página
Clase Propiedades CSS
<number> calc(var(--spacing) * <number>)
<fraction> calc(<fraction> * -100%)", true], ["px", "1px
px -1px", true], ["full", "100%
full -100%", true], ["auto", "auto
(<custom-property>) var(<custom-property>)
[<value>] <value>

Examples#

Basic example#

Use top-<number>, right-<number>, bottom-<number>, left-<number>, and inset-<number> utilities like top-0 and bottom-4 to set the horizontal or vertical position of a positioned element:

{ 

    </div>
    <div className="absolute top-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      01
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute inset-x-0 top-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      02
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute top-0 right-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      03
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute inset-y-0 left-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      04
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-purple-500 p-4">05</div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute inset-y-0 right-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      06
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute bottom-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      07
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute inset-x-0 bottom-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      08
    </div>
  </div>
  <div className="relative size-18 rounded-lg sm:size-32">
    <div className="absolute inset-0">

    </div>
    <div className="absolute right-0 bottom-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
      09
    </div>
  </div>
</div>

}

<!-- [!code classes:inset-x-0,inset-y-0,inset-0,right-0,left-0,top-0,bottom-0] -->
<!-- Pin to top left corner -->
<div class="relative size-32 ...">
  <div class="absolute top-0 left-0 size-16 ...">01</div>
</div>

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

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

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

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

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

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

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

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

Using negative values#

To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value:

{ 

    </div>
    <div className="absolute -top-4 -left-4 flex items-center justify-center rounded-lg bg-purple-500 p-4"></div>
  </div>
</div>

}

<!-- [!code classes:-left-4,-top-4] -->
<div class="relative size-32 ...">
  <div class="absolute -top-4 -left-4 size-14 ..."></div>
</div>

Using logical properties#

Use inset-s-<number> or inset-e-<number> utilities like inset-s-0 and inset-e-4 to set the inset-inline-start and inset-inline-end logical properties, which map to either the left or right side based on the text direction:

{

Left-to-right

      </div>
      <div className="absolute top-0 left-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
    </div>
  </div>
  <div className="flex flex-col items-end gap-y-4">
    <p className="text-sm font-medium">Right-to-left</p>
    <div className="relative size-18 rounded-lg sm:size-32">
      <div className="absolute inset-0">

      </div>
      <div className="absolute top-0 right-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
    </div>
  </div>
</div>

}

<!-- [!code classes:inset-s-0] -->
<div dir="ltr">
  <div class="relative size-32 ...">
    <div class="absolute inset-s-0 top-0 size-14 ..."></div>
  </div>
  <div>
    <div dir="rtl">
      <div class="relative size-32 ...">
        <div class="absolute inset-s-0 top-0 size-14 ..."></div>
      </div>
      <div></div>
    </div>
  </div>
</div>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

Using a custom value#

Responsive design#

Customizing your theme#