Skip to content

Instantly share code, notes, and snippets.

@cvan
Created October 21, 2019 23:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cvan/0a1b42f31900f046379aa74d4a903ad9 to your computer and use it in GitHub Desktop.
Save cvan/0a1b42f31900f046379aa74d4a903ad9 to your computer and use it in GitHub Desktop.
tailwind CSS breakpoints (including iPhone 11 Pro Max)
// References used:
// - https://yesviz.com/devices.php
// - https://ricostacruz.com/til/css-media-query-breakpoints
// - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
screens: {
xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
lg: { min: '1200px' }, // Desktop smallest.
xl: { min: '1159px' }, // Desktop wide.
xxl: { min: '1359px' } // Desktop widescreen.
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment