Tailwind breakpoints on real devices, from sm to 2xl

Tailwind's default breakpoints are sm (640px), md (768px), lg (1024px), xl (1280px) and 2xl (1536px), and each one means "this width and wider". On real devices that works out like this: every phone held upright gets your unprefixed classes, most phones on their side get md, iPads span sm to lg, and laptops land in xl or 2xl depending on their display scaling. The tables below map 123 real devices onto each range.

How Tailwind breakpoints work

Tailwind is mobile-first. A class without a prefix applies at every width. A prefixed class switches on at its breakpoint and stays on for everything wider, because under the hood it's a min-width media query.

<!-- 1 column on phones, 2 from 768px, 3 from 1280px -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
  ...
</div>

At the browser's default 16px font size, the rem values equal the pixel values. The width being tested is the viewport in CSS pixels, not the screen's physical pixels (why those differ). The official reference is Tailwind's responsive design docs.

Phones and tablets held upright

Phones and tablets on their side

Turn a device sideways and its long side becomes the width. The numbers below are those screen widths. On iPhones with a notch or Dynamic Island, Safari insets pages into the safe area in landscape by default (WebKit's explanation), so the width your page actually lays out at can come out smaller. Either way, treat any phone on its side as "sm or md".

Laptops and monitors

At each machine's default display scaling:

These are screen widths. The browser window only matches them when it's maximized.

The gotchas

Phones on their side get your md layout

Your md design probably has a horizontal nav, two columns and maybe a sticky header. A phone on its side has the width for that but not the height: an iPhone 17 Pro in landscape leaves roughly 337px of height once Safari's bars are in (an estimate; see how much of the screen iPhone users see in Safari). A 64px sticky header eats a fifth of it.

An arbitrary variant fixes it without touching your breakpoints:

<header class="sticky top-0 [@media(max-height:500px)]:static">

That wraps the class in @media (max-height: 500px). Every closed phone on its side is 466px tall or less, while no tablet or laptop screen is shorter than 720px, so only sideways phones match (plus a desktop window someone has squashed very short).

md is not "tablet"

• The iPad mini (744) is below md, so it gets your sm layout, which in most sites is the phone layout stretched.
• The iPad Air 11″ (820) gets md.
• The 13″ iPads held upright (1024–1032) get lg, which is often the full desktop nav on a touch screen.

If that desktop nav relies on hover menus, iPad users are stuck. Tailwind v4 already applies hover: styles only on devices that can hover, but a menu that opens only on hover still won't open with a tap.

Deciding layout in JavaScript? Don't read screen.width: iPadOS Safari keeps reporting its portrait values after the iPad is rotated. window.matchMedia('(min-width: 1024px)').matches tests the same viewport Tailwind does.

1366, 1440 and most MacBooks never reach 2xl

The 1366×768 HD laptop, the MacBook Air M1 (1440), the MacBook Air 13″ (1470) and the MacBook Pro 14″ (1512) all live in xl. A 15.6″ Windows laptop at 125% is exactly 1536, and min-width includes the edge, so it gets 2xl. If you polish the design at 2xl and treat xl as leftovers, the leftovers are what most MacBook users see.

The container class has the same edge. It caps width at the start of the current breakpoint, so a MacBook Air 13″ gets a 1280px container with 95px of space on each side, while a 1536px Windows laptop gets a 1536px container with none. Add padding (container mx-auto px-6) or text will sit against the window edge. More on that in mobile padding that works.

One setting moves a laptop between xl and 2xl

A 1920×1080 laptop reports 1920 (2xl) at 100% scaling, 1536 (2xl) at 125% and 1280 (xl) at 150%. The 16″ 2560×1600 laptops are 1707 at their default 150% but 1463 (xl) at 175%. Details in Windows display scaling and the 1536×864 viewport and MacBook resolution vs CSS pixels.

Split screen

A window snapped to half of a 1536px screen is about 768px wide: right on md. Laptop users working with two windows side by side see your tablet layout.

max-* variants for ranges

Tailwind also generates max-* variants (since v3.2) for "below this width", and you can stack them to target a range:

<!-- only below 768px -->
<nav class="max-md:hidden">...</nav>

<!-- only from 768px up to 1279px -->
<aside class="hidden md:max-xl:block">...</aside>

<!-- one-off widths -->
<div class="grid grid-cols-2 min-[900px]:grid-cols-3">...</div>
<p class="text-base max-[380px]:text-sm">...</p>

That last one catches only the narrowest phones: 360px Galaxys, 375px iPhones and anyone using a zoomed display setting.

Customizing breakpoints

Tailwind v4: @theme in your CSS

@import "tailwindcss";

@theme {
  --breakpoint-md: 46.5rem; /* 744px: the iPad mini joins md */
  --breakpoint-3xl: 120rem; /* 1920px: adds a 3xl: variant */
}

Moving md to 744px pulls in the iPad mini and the opened Galaxy Z Fold 7 and Pixel 10 Pro Fold, while every closed phone stays below it. To remove a default, set it to initial (--breakpoint-2xl: initial;). To start from scratch, put --breakpoint-*: initial; first and then define your own.

Tailwind v3: tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    screens: {
      ...defaultTheme.screens,
      md: '744px',     // iPad mini joins md
      '3xl': '1920px', // new, after 2xl
    },
  },
}

In v3, theme.screens replaces the whole set, which is why the defaults are spread in first. Keep them in ascending order.

Ask your AI to check it

If an AI tool built your site, paste this in:

My site uses Tailwind's default breakpoints (sm 640, md 768, lg 1024, xl 1280, 2xl 1536, all min-width). Go through every sm:, md:, lg:, xl: and 2xl: class and check: 1) phones on their side (667–1006px wide but only 360–466px tall) don't get anything that needs height, like a sticky header or a full-screen hero; 2) the iPad mini (744px) and iPad Air (820px) both get a sensible layout; 3) laptops between 1280 and 1535px (MacBook Air 13 is 1470px, MacBook Pro 14 is 1512px) get a finished design, not a gap between the tablet and 2xl layouts; 4) any container has side padding. Don't change the breakpoint values. List every change you make.

In doesitfit, the Tailwind breakpoints preset loads one screen at the start of each range (640, 768, 1024, 1280 and 1536 wide, plus a 375px phone), and the Rotate button turns every phone sideways at once, which is the quickest way to catch the md-on-a-phone problem. For the bigger picture on where to put breakpoints, see responsive breakpoints in 2026.

The short version

• No prefix = phones. No regular phone held upright reaches sm.
• md catches most tablets and nearly every phone on its side. Check it at 874×337, not just 820×1180.
• The iPad mini is sm; the 13″ iPads are lg.
• Most MacBooks are xl, not 2xl. Finish your xl design.
• Customize in @theme (v4) or theme.screens (v3) when the data says a device is on the wrong side of a line.