Tailwind CSS Sizing Cheatsheet

Complete Tailwind v4 sizing reference for width, height, min/max constraints.
Base unit: --spacing: 4px

Width - Spacing Scale

w-0

0px

w-0.5

2px

w-1

4px

w-1.5

6px

w-2

8px

w-2.5

10px

w-3

12px

w-3.5

14px

w-4

16px

w-5

20px

w-6

24px

w-7

28px

w-8

32px

w-9

36px

w-10

40px

w-11

44px

w-12

48px

w-14

56px

w-16

64px

w-20

80px

w-24

96px

w-28

112px

w-32

128px

w-36

144px

w-40

160px

w-44

176px

w-48

192px

w-52

208px

w-56

224px

w-60

240px

w-64

256px

w-72

288px

w-80

320px

w-96

384px

Width - Fractions

w-1/2

50%

w-1/3

33.333%

w-2/3

66.667%

w-1/4

25%

w-2/4

50%

w-3/4

75%

w-1/5

20%

w-2/5

40%

w-3/5

60%

w-4/5

80%

w-1/6

16.667%

w-2/6

33.333%

w-3/6

50%

w-4/6

66.667%

w-5/6

83.333%

w-1/12

8.333%

w-2/12

16.667%

w-3/12

25%

w-4/12

33.333%

w-5/12

41.667%

w-6/12

50%

w-7/12

58.333%

w-8/12

66.667%

w-9/12

75%

w-10/12

83.333%

w-11/12

91.667%

Width - Special Values

w-autoauto

w-px1px

w-full100%

w-screen100vw

w-svw100svw

w-lvw100lvw

w-dvw100dvw

w-minmin-content

w-maxmax-content

w-fitfit-content

Visual Size Comparison

Container Widths (max-w-*)

max-w-xs

max-w-sm

max-w-md

max-w-lg

max-w-xl

Common Spacing Sizes

size-4

16px

size-8

32px

size-12

48px

size-16

64px

size-20

80px

size-24

96px

Usage Examples

Full-width Container

<div class="w-full max-w-4xl mx-auto">
  <!-- Fluid width, max 896px -->
</div>

Full-height Layout

<div class="min-h-screen flex flex-col">
  <!-- At least viewport height -->
</div>

Square Element

<div class="size-16 rounded-full">
  <!-- 64px x 64px circle -->
</div>

Responsive Columns

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 100% → 50% → 33% -->
</div>

Viewport Units Explained

svw/svh

Small viewport - excludes browser UI (address bar, etc.)

lvw/lvh

Large viewport - full viewport size

dvw/dvh

Dynamic viewport - adapts as browser UI shows/hides

vw/vh (screen)

Traditional viewport units - 100% of viewport

For arbitrary values, use bracket notation: w-[300px] or h-[50vh]

See Tailwind classes on any website

Frontend Hero's Tailwind Scanner shows you all Tailwind classes of any element. Inspect sizing, spacing, colors, and more.

Get Frontend Hero now →

Explore more Tailwind tools

Tailwind Grid Generator

Create grid layouts visually

Tailwind Flexbox Generator

Create flex layouts visually

Tailwind Gradient Generator

Create custom gradients

Tailwind Text Gradient

Gradient text effects

Tailwind Gradients Collection

275+ ready-to-use gradients

Tailwind Colors

Complete 240+ color palette

Tailwind Box Shadow Generator

Design multi-layer shadows

Tailwind Text Shadow

Add depth to text with shadows

Tailwind Filter Generator

Apply blur, brightness & more

Tailwind Transform Generator

Rotate, scale & translate elements

Tailwind Animation Generator

Create built-in & custom animations

Tailwind Transition Generator

Smooth hover transitions

Tailwind Config Generator

Generate your config file

Tailwind Input Generator

Design form inputs visually

Tailwind Class Sorter

Organize classes in order

Flexbox Cheatsheet

All flex utilities visualized

Overflow Cheatsheet

Control content overflow

Browse all free Tailwind tools →