Device viewport sizes

The viewport of every device you are asked to support, in the CSS pixels a media query actually reads, with the Tailwind breakpoint each one lands in.

Kind
iPhone SE
iPhone 13 mini
iPhone 15
iPhone 15 Pro Max
Pixel 8
Galaxy S24
iPad mini
iPad 10.9
iPad Pro 11
iPad Pro 13
Surface Pro
MacBook Air 13
MacBook Pro 14
MacBook Pro 16
Common laptop
Desktop 1080p
Desktop 1440p
Tailwind sm
Tailwind md
Tailwind lg
Tailwind xl
Tailwind 2xl

Questions

Why is an iPhone 393 wide and not 1179?+

Because 1179 is hardware pixels. CSS sees 393 at a device pixel ratio of 3, and 393 is the number your breakpoints are compared against.

Should I design for these devices?+

Design for the ranges between them. A layout pinned to one phone breaks on the next; the list is here to tell you where the crowds are, not to be a set of targets.

What does the breakpoint column mean?+

Which Tailwind breakpoint that width satisfies. An iPad at 820 is md but not lg, which is exactly the case people forget to check.

Related tools

The tools are free. So is most of the library.

1935 blocks and 989 pieces for shadcn/ui and Tailwind, built on the same tokens these tools write. Install one with a command and the code is yours.

No signup for the tools. MIT for free blocks, commercial licence for Pro.

Markdown version