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

px to rem converterConvert between px and rem at any root size, both ways, with the sizes you actually use listed out underneath.Type scale generatorBuild a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.Aspect ratio calculatorTurn any width and height into a reduced ratio, a decimal and the Tailwind class, resize to a new width while keeping the shape, and copy the aspect-ratio rule that reserves the space before the image loads.

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

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

Browse the blocks

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

Markdown version