Skip to main content

Sizing and positioning

In this chapter, you learn how to control the size and placement of elements with Tailwind CSS.

Width​

Fixed width​

<div class="w-0">0px</div>
<div class="w-1">4px</div>
<div class="w-4">16px</div>
<div class="w-8">32px</div>
<div class="w-16">64px</div>
<div class="w-32">128px</div>
<div class="w-64">256px</div>
<div class="w-96">384px</div>

Percentage width​

<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-2/3">66.666%</div>
<div class="w-1/4">25%</div>
<div class="w-3/4">75%</div>
<div class="w-full">100%</div>

Special widths​

<div class="w-auto">Auto</div>
<div class="w-screen">Viewport width</div>
<div class="w-min">Min content width</div>
<div class="w-max">Max content width</div>
<div class="w-fit">Fit</div>

Arbitrary values in v4​

<!-- In v4 you can specify arbitrary values without brackets -->
<div class="w-200">50rem (= 200 × 0.25rem)</div>
<div class="w-[200px]">200px</div>
<div class="w-[50vw]">50vw</div>
Be careful with the w-200 formula

w-200 is computed as calc(var(--spacing) * 200). With the default --spacing: 0.25rem, it becomes 50rem (800px), not 200px. When you want to specify a particular px value, use the bracket syntax, as in w-[200px].

Height​

Fixed height​

<div class="h-8">32px</div>
<div class="h-16">64px</div>
<div class="h-32">128px</div>
<div class="h-64">256px</div>

Special heights​

<div class="h-auto">Auto</div>
<div class="h-full">100%</div>
<div class="h-screen">Viewport height</div>
<div class="h-svh">Small viewport height</div>
<div class="h-lvh">Large viewport height</div>
<div class="h-dvh">Dynamic viewport height</div>
<div class="h-min">Min content height</div>
<div class="h-max">Max content height</div>
<div class="h-fit">Fit</div>
The meaning of svh / lvh / dvh

svh / lvh / dvh are new viewport units that account for the address bar of mobile browsers.

Min and max sizes​

Min width (min-width)​

<div class="min-w-0">0</div>
<div class="min-w-full">100%</div>
<div class="min-w-min">min-content</div>
<div class="min-w-max">max-content</div>
<div class="min-w-fit">fit-content</div>

Max width (max-width)​

<div class="max-w-xs">320px</div>
<div class="max-w-sm">384px</div>
<div class="max-w-md">448px</div>
<div class="max-w-lg">512px</div>
<div class="max-w-xl">576px</div>
<div class="max-w-2xl">672px</div>
<div class="max-w-3xl">768px</div>
<div class="max-w-4xl">896px</div>
<div class="max-w-5xl">1024px</div>
<div class="max-w-6xl">1152px</div>
<div class="max-w-7xl">1280px</div>
<div class="max-w-full">100%</div>
<div class="max-w-none">None</div>
<div class="max-w-prose">65ch (deprecated in v4, not in the docs; the current alternative is max-w-[65ch])</div>
Changes in Tailwind v4

The max-w-screen-sm to max-w-screen-2xl utilities that existed in v3 (which set the breakpoint width directly as max-width) are not listed in the v4 docs. They were removed for a time in the v4 alpha (Issue #13267), but they were restored via a compatibility layer and do still work. For new code, it is recommended to use an arbitrary value like max-w-[640px], or define named values with --container-* in @theme.

Min and max height​

<div class="min-h-0">0</div>
<div class="min-h-full">100%</div>
<div class="min-h-screen">100vh</div>
<div class="min-h-svh">100svh</div>

<div class="max-h-32">128px</div>
<div class="max-h-screen">100vh</div>
<div class="max-h-none">None</div>

Size (width and height at once)​

<div class="size-8">32px × 32px</div>
<div class="size-16">64px × 64px</div>
<div class="size-full">100% × 100%</div>

Positioning (Position)​

Position types​

<div class="static">Static (default)</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
<div class="sticky">Sticky</div>

Specifying the position​

<div class="absolute top-0 left-0">Top-left</div>
<div class="absolute top-0 right-0">Top-right</div>
<div class="absolute bottom-0 left-0">Bottom-left</div>
<div class="absolute bottom-0 right-0">Bottom-right</div>
<div class="absolute inset-0">Stretch to fill</div>
<div class="absolute inset-x-0">Stretch horizontally</div>
<div class="absolute inset-y-0">Stretch vertically</div>

Position values​

<div class="top-0">0px</div>
<div class="top-4">16px</div>
<div class="top-1/2">50%</div>
<div class="top-full">100%</div>
<div class="-top-4">-16px (negative value)</div>

Z-Index​

<div class="z-0">0</div>
<div class="z-10">10</div>
<div class="z-20">20</div>
<div class="z-30">30</div>
<div class="z-40">40</div>
<div class="z-50">50</div>
<div class="z-auto">auto</div>
<div class="-z-10">-10 (negative value)</div>

Object fit​

Control how images and videos fit.

<img class="object-contain" src="..." />
<img class="object-cover" src="..." />
<img class="object-fill" src="..." />
<img class="object-none" src="..." />
<img class="object-scale-down" src="..." />

Object position​

<img class="object-cover object-center" src="..." />
<img class="object-cover object-top" src="..." />
<img class="object-cover object-bottom" src="..." />
<img class="object-cover object-left" src="..." />
<img class="object-cover object-right" src="..." />

Overflow​

<div class="overflow-auto">Auto</div>
<div class="overflow-hidden">Hidden</div>
<div class="overflow-visible">Visible</div>
<div class="overflow-scroll">Scroll</div>
<div class="overflow-x-auto">Horizontal scroll</div>
<div class="overflow-y-auto">Vertical scroll</div>

Display​

<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="inline-flex">Inline-flex</div>
<div class="grid">Grid</div>
<div class="inline-grid">Inline-grid</div>
<div class="hidden">Hidden</div>
<div class="contents">Contents</div>

Visibility​

<div class="visible">Visible</div>
<div class="invisible">Hidden (space preserved)</div>
<div class="collapse">Collapse</div>

Aspect ratio​

<div class="aspect-auto">Auto</div>
<div class="aspect-square">1:1</div>
<div class="aspect-video">16:9</div>
<div class="aspect-[4/3]">4:3</div>

Practical examples​

Centering on the screen​

<!-- Method 1: Flexbox -->
<div class="min-h-screen flex items-center justify-center">
  <div class="p-8 bg-white rounded-lg shadow-sm">
    Centered content
  </div>
</div>

<!-- Method 2: Grid -->
<div class="min-h-screen grid place-items-center">
  <div class="p-8 bg-white rounded-lg shadow-sm">
    Centered content
  </div>
</div>

<!-- Method 3: Absolute + Transform -->
<div class="relative min-h-screen">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              p-8 bg-white rounded-lg shadow-sm">
    Centered content
  </div>
</div>

Fixed header​

<header class="fixed top-0 inset-x-0 z-50 bg-white shadow-sm">
  <nav class="max-w-7xl mx-auto px-4 h-16 flex items-center">
    <a href="/" class="font-bold text-xl">Logo</a>
  </nav>
</header>
<main class="pt-16">
  <!-- Padding equal to the header height -->
</main>
<div class="flex">
  <aside class="w-64 sticky top-0 h-screen overflow-y-auto">
    Sidebar
  </aside>
  <main class="flex-1">
    Main content
  </main>
</div>

Card image​

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
  <div class="aspect-video relative">
    <img
      src="..."
      class="absolute inset-0 w-full h-full object-cover"
    />
  </div>
  <div class="p-4">
    <h3 class="font-bold">Title</h3>
  </div>
</div>
<!-- Overlay -->
<div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
  <!-- Modal body -->
  <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
    <div class="p-6">
      <h2 class="text-xl font-bold">Modal title</h2>
      <p class="mt-4">Modal content...</p>
    </div>
    <!-- Close button -->
    <button class="absolute top-4 right-4">×</button>
  </div>
</div>

Responsive image​

<div class="relative w-full aspect-[16/9]">
  <img
    src="..."
    class="absolute inset-0 w-full h-full object-cover rounded-lg"
  />
</div>

Summary​

  • w-* / h-* for width and height
  • min-* / max-* for min and max sizes
  • size-* to set width and height at once
  • relative / absolute / fixed / sticky for positioning
  • top-* / right-* / bottom-* / left-* for position
  • z-* for stacking order
  • object-* for how images fit
  • aspect-* for aspect ratio