Skip to content

Instantly share code, notes, and snippets.

@cvan

cvan/tailwind.config.js

Last active November 14, 2024 14:27
Show Gist options
  • Save cvan/47455a4f8aaa22e73e54253954635dc5 to your computer and use it in GitHub Desktop.
Save cvan/47455a4f8aaa22e73e54253954635dc5 to your computer and use it in GitHub Desktop.
Download ZIP
tailwind CSS breakpoints (including iPhone 11 Pro Max)
Raw
tailwind.config.js
// References used:
// - https://yesviz.com/devices.php
// - https://ricostacruz.com/til/css-media-query-breakpoints
// - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
screens: {
'2xs': { min: '300px' },
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: '1259px' }, // Desktop wide.
'2xl': { min: '1359px' } // Desktop widescreen.
},
@a-long-way
Copy link

a-long-way commented Oct 11, 2023 •
edited
Loading

Thank you, this is very helpful for me

@exSnake
Copy link

exSnake commented Oct 18, 2023

lg: 1159, xl: 1200, md: max: '1199px' ? Why they overlap?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment