tailwind CSS breakpoints (including iPhone 11 Pro Max)

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.
    },

2xl in the above needs to be quoted, e.g. '2xl': {min: '1359px'}, // Desktop widescreen..

2xl in the above needs to be quoted, e.g. '2xl': {min: '1359px'}, // Desktop widescreen..

thanks, fixed.

Thanks!!

Thank you, this is very helpful for me

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