Tailwind CSS Cheatsheet

Spacing and Sizing

Use this Tailwind CSS reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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