Foundations

Layout & shape

Squared and hairline: zero radius, 1px borders, the default spacing scale.

Radius is zeroed

Each box below uses a different rounded-* utility — yet only rounded-full is a circle. Everything else resolves to 0.

rounded-none

rounded-md

rounded-lg

rounded-2xl

rounded-3xl

rounded-full

--border

Default hairline

--border-strong

Strong border

--hair

Faint divider

The default Tailwind 4px scale. A few common steps:

p-1

4px

p-2

8px

p-3

12px

p-4

16px

p-6

24px

p-8

32px

p-12

48px

Tailwind defaults plus two custom steps so wide desktop consoles fill the canvas instead of stranding at a narrow width.

sm640pxLarge phones

md768pxTablets

lg1024pxSidebar appears

xl1280pxLaptops

2xl1536pxDesktops

3xl1920pxWide / QHD (custom)

4xl2560px4K / 32" (custom)