Top Right Bottom Left - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { CustomizingYourSpacingScale } from "@/components/content.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "top / right / bottom / left"; export const description = "Utilities for controlling the placement of positioned elements.";

<ApiTable rows={[ { prefix: "inset", property: "inset" }, { prefix: "inset-x", property: "inset-inline" }, { prefix: "inset-y", property: "inset-block" }, { prefix: "inset-s", property: "inset-inline-start" }, { prefix: "inset-e", property: "inset-inline-end" }, { prefix: "inset-bs", property: "inset-block-start" }, { prefix: "inset-be", property: "inset-block-end" }, { prefix: "top", property: "top" }, { prefix: "right", property: "right" }, { prefix: "bottom", property: "bottom" }, { prefix: "left", property: "left" }, ].flatMap(({ prefix, property }) => [ ["<number>", "calc(var(--spacing) * <number>)"], ["<number>", "calc(var(--spacing) * -<number>)", true], ["<fraction>", "calc(<fraction> * 100%)"], ["<fraction>", "calc(<fraction> * -100%)", true], ["px", "1px"], ["px", "-1px", true], ["full", "100%"], ["full", "-100%", true], ["auto", "auto"], ["(<custom-property>)", "var(<custom-property>)"], ["[<value>]", "<value>"], ].map(([suffix, value, negative]) => [${negative ? "-" : ""}${prefix}-${suffix}, ${property}: ${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:

html

<!-- [!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>

</Figure>

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:

html

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

</Figure>

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:

<Figure> <Example> { <div className="grid grid-cols-2 place-items-center gap-x-4"> <div className="flex flex-col items-start gap-y-4"> <p className="text-sm font-medium">Left-to-right</p> <div className="relative size-18 rounded-lg sm:size-32"> <div className="absolute inset-0"> <Stripes border className="h-full rounded-lg" /> </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"> <Stripes border className="h-full rounded-lg" /> </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> } </Example>

html

<!-- [!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>

</Figure>

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