Tailwind’s default breakpoints are sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px, applied as minimum widths. Every phone in portrait is below sm. Phones in landscape land in md. Tablets in portrait are md, and lg or xl in landscape, so check both orientations.
The breakpoints
Tailwind uses min-width media queries: sm applies from 640px up, md from 768px, lg from 1024px, xl from 1280px and 2xl from 1536px. Un-prefixed utilities apply to every size, so they are your mobile styles.
Where devices fall
Using the viewport sizes in CSS pixels from the device sizes page:
- Phones in portrait (roughly 360 to 440px wide): all below sm. Your un-prefixed styles are all they get.
- Phones in landscape (roughly 800 to 960px wide): md. Landscape often triggers a tablet layout you did not plan for.
- Tablets in portrait (roughly 768 to 834px wide): md. In landscape (roughly 1024 to 1280px): lg, or xl for the widest.
What to test
Flip any frame between portrait and landscape in Mobile Preview to see which breakpoint your page uses.
- A phone in portrait and the same phone in landscape: the layout switches to md.
- A tablet in portrait: it receives md styles but still has a touch interface.
- Navigation that changes at md or lg: check that it still works with touch.
Frequently asked questions
- What are Tailwind’s default breakpoints?
- sm 640px, md 768px, lg 1024px, xl 1280px and 2xl 1536px, all as min-width.
- Which breakpoint does an iPhone use?
- In portrait an iPhone is below sm (under 640px). In landscape, every iPhone in the device list falls in the md range (768 to 1023px).
- Is an iPad portrait md or lg?
- Portrait iPads in the device list are 768 to 834px wide in CSS pixels, so md. Landscape is lg (1024 to 1194px).
Install Mobile Preview from the Visual Studio Marketplace · Open VSX (Cursor, Windsurf, VSCodium) · Pricing
More: all guides · device sizes · The viewport meta tag explained: what it does and the one line you need · 100vh on mobile: why it overflows and how to fix it with dvh · Safe areas in CSS: avoid the notch and the Dynamic Island · A mobile checklist for AI-generated UI (what usually breaks first) · How to make a phone mockup screenshot of your website (free)