Tailwind CSS Cheatsheet

Spacing and Sizing

Use this Tailwind CSS reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

The Spacing Scale

Tailwind uses a numeric scale where each step equals 0.25rem (4px at default root font size).

Step	rem	px
`0`	0	0
`0.5`	0.125rem	2px
`1`	0.25rem	4px
`1.5`	0.375rem	6px
`2`	0.5rem	8px
`2.5`	0.625rem	10px
`3`	0.75rem	12px
`3.5`	0.875rem	14px
`4`	1rem	16px
`5`	1.25rem	20px
`6`	1.5rem	24px
`7`	1.75rem	28px
`8`	2rem	32px
`9`	2.25rem	36px
`10`	2.5rem	40px
`11`	2.75rem	44px
`12`	3rem	48px
`14`	3.5rem	56px
`16`	4rem	64px
`20`	5rem	80px
`24`	6rem	96px
`28`	7rem	112px
`32`	8rem	128px
`36`	9rem	144px
`40`	10rem	160px
`44`	11rem	176px
`48`	12rem	192px
`52`	13rem	208px
`56`	14rem	224px
`60`	15rem	240px
`64`	16rem	256px
`72`	18rem	288px
`80`	20rem	320px
`96`	24rem	384px

Padding

Class	CSS
`p-{n}`	`padding: {n}` (all sides)
`px-{n}`	`padding-left: {n}; padding-right: {n}`
`py-{n}`	`padding-top: {n}; padding-bottom: {n}`
`pt-{n}`	`padding-top: {n}`
`pr-{n}`	`padding-right: {n}`
`pb-{n}`	`padding-bottom: {n}`
`pl-{n}`	`padding-left: {n}`
`ps-{n}`	`padding-inline-start: {n}` (logical)
`pe-{n}`	`padding-inline-end: {n}` (logical)

<div class="p-4">All sides 1rem</div>
<div class="px-6 py-3">Horizontal 1.5rem, vertical 0.75rem</div>
<div class="pt-8 pb-4 px-6">Individual sides</div>
<button class="px-4 py-2">Button padding</button>

Margin

Same suffixes as padding (m-, mx-, my-, mt-, mr-, mb-, ml-, ms-, me-).

Special value	CSS
`m-auto`	`margin: auto`
`mx-auto`	`margin-left: auto; margin-right: auto`
`my-auto`	`margin-top: auto; margin-bottom: auto`
`-m-4`	`margin: -1rem` (negative margin)
`-mt-2`	`margin-top: -0.5rem`

<!-- Center a block element -->
<div class="max-w-2xl mx-auto">Centered</div>

<!-- Negative margin overlap -->
<div class="mt-8 -mb-4">...</div>

<!-- Auto margin pushes items in flex -->
<div class="flex">
  <span>Left</span>
  <span class="ml-auto">Right</span>
</div>

Space Between (Flex/Grid children shortcut)

Adds margin to all children except the first (avoids adding gap to the parent).

Class	CSS
`space-x-{n}`	`margin-left` on all children except first
`space-y-{n}`	`margin-top` on all children except first
`space-x-reverse`	for `flex-row-reverse`
`space-y-reverse`	for `flex-col-reverse`

<div class="flex space-x-4">
  <button>A</button>
  <button>B</button>
  <button>C</button>
</div>

Prefer gap-* on the flex/grid container — it's more predictable and supports wrapping correctly.

Width

Class	CSS
`w-0`	`width: 0`
`w-px`	`width: 1px`
`w-{n}`	`width: {spacing scale}`
`w-1/2`	`width: 50%`
`w-1/3`	`width: 33.333%`
`w-2/3`	`width: 66.667%`
`w-1/4`	`width: 25%`
`w-3/4`	`width: 75%`
`w-1/5` – `w-4/5`	20%–80%
`w-1/6` – `w-5/6`	16.67%–83.33%
`w-1/12` – `w-11/12`	grid-friendly fractions
`w-full`	`width: 100%`
`w-screen`	`width: 100vw`
`w-svw`	`width: 100svw`
`w-dvw`	`width: 100dvw`
`w-min`	`width: min-content`
`w-max`	`width: max-content`
`w-fit`	`width: fit-content`
`w-auto`	`width: auto`
`w-[347px]`	`width: 347px`

Min-Width / Max-Width

Min-Width

Class	CSS
`min-w-0`	`min-width: 0`
`min-w-px`	`min-width: 1px`
`min-w-{n}`	spacing scale
`min-w-full`	`min-width: 100%`
`min-w-min`	`min-width: min-content`
`min-w-max`	`min-width: max-content`
`min-w-fit`	`min-width: fit-content`

Max-Width

Class	CSS
`max-w-none`	`max-width: none`
`max-w-0`	`max-width: 0`
`max-w-xs`	`max-width: 20rem`
`max-w-sm`	`max-width: 24rem`
`max-w-md`	`max-width: 28rem`
`max-w-lg`	`max-width: 32rem`
`max-w-xl`	`max-width: 36rem`
`max-w-2xl`	`max-width: 42rem`
`max-w-3xl`	`max-width: 48rem`
`max-w-4xl`	`max-width: 56rem`
`max-w-5xl`	`max-width: 64rem`
`max-w-6xl`	`max-width: 72rem`
`max-w-7xl`	`max-width: 80rem`
`max-w-full`	`max-width: 100%`
`max-w-screen-sm`	breakpoint-based max
`max-w-min`	`max-width: min-content`
`max-w-max`	`max-width: max-content`
`max-w-fit`	`max-width: fit-content`
`max-w-prose`	`max-width: 65ch`
`max-w-[800px]`	arbitrary

Height

Class	CSS
`h-0`	`height: 0`
`h-px`	`height: 1px`
`h-{n}`	spacing scale
`h-1/2`	`height: 50%`
`h-full`	`height: 100%`
`h-screen`	`height: 100vh`
`h-svh`	`height: 100svh` (small viewport)
`h-dvh`	`height: 100dvh` (dynamic viewport)
`h-lvh`	`height: 100lvh` (large viewport)
`h-min`	`height: min-content`
`h-max`	`height: max-content`
`h-fit`	`height: fit-content`
`h-auto`	`height: auto`
`h-[500px]`	arbitrary

Min-Height / Max-Height

Same pattern — min-h-* and max-h-* with the same values.

<!-- Full-height page with scrollable main -->
<div class="flex flex-col min-h-screen">
  <header>...</header>
  <main class="grow overflow-y-auto">...</main>
</div>

Size (Width + Height Shorthand)

Sets both width and height simultaneously (Tailwind v3.3+).

Class	CSS
`size-{n}`	`width: {n}; height: {n}`
`size-full`	`width: 100%; height: 100%`
`size-auto`	`width: auto; height: auto`
`size-fit`	`width: fit-content; height: fit-content`
`size-[48px]`	arbitrary square

<!-- Icon button, avatar, dot indicator -->
<button class="size-10 rounded-full flex items-center justify-center">
  <svg class="size-5">...</svg>
</button>

<img class="size-12 rounded-full object-cover" src="avatar.jpg" alt="">
<span class="size-2 rounded-full bg-green-500"></span>

Arbitrary Spacing

<div class="mt-[72px] px-[1.625rem] w-[calc(100%-2rem)]">...</div>

Logical Properties

Use logical (RTL-aware) classes when building internationalized UIs:

Shorthand	Logical start	Logical end
`ms-` / `me-`	`margin-inline-start`	`margin-inline-end`
`ps-` / `pe-`	`padding-inline-start`	`padding-inline-end`
`start-` / `end-`	inset-inline-start	inset-inline-end