add smaller breakpoint than 640px ?
I've not given a lot of thought to what breakpoints to target. https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design lists the following resolutions for mobile:
| Mobile resolution | Percentage |
|---|---|
| 360×800 | 11.01% |
| 390×844 | 7.92% |
| 414×896 | 5.55% |
| 393×873 | 5.26% |
| 412×915 | 5.00% |
and the following for desktop:
| Desktop Resolution | Percentage |
|---|---|
| 1920×1080 | 22.18% |
| 1366×768 | 14.04% |
| 1440×900 | 6.41% |
| 1280×720 | 5.45% |
| 1280×1024 | 4.52% |
I found this: https://yesviz.com/iphones.php
| device name | viewport | resolution | screen | pixel | px/i | css px/i | CSS Media Query |
|---|---|---|---|---|---|---|---|
| Apple iPhone 11 | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | Apple iPhone 11 |
| Apple iPhone 11 Pro | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | Apple iPhone 11 Pro |
| Apple iPhone 11 Pro Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | Apple iPhone 11 Pro Max |
| Apple iPhone 12 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 12 |
| Apple iPhone 12 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | Apple iPhone 12 Mini |
| Apple iPhone 12 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 12 Pro |
| Apple iPhone 12 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | Apple iPhone 12 Pro Max |
| Apple iPhone 13 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 13 |
| Apple iPhone 13 mini | 360 x 780 | 1080 x 2340 | 5.4″ | 3.0 | 476 | 159 | Apple iPhone 13 Mini |
| Apple iPhone 13 Pro | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 13 Pro |
| Apple iPhone 13 Pro Max | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | Apple iPhone 13 Pro Max |
| Apple iPhone 14 | 390 x 844 | 1170 x 2532 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 14 |
| Apple iPhone 14 Plus | 428 x 926 | 1284 x 2778 | 6.7″ | 3.0 | 458 | 153 | Apple iPhone 14 Plus |
| Apple iPhone 14 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 460 | 153 | Apple iPhone 14 Pro |
| Apple iPhone 14 Pro Max | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | Apple iPhone 14 Pro Max |
| Apple iPhone 15 | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | Apple iPhone 15 |
| Apple iPhone 15 Plus | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | Apple iPhone 15 Plus |
| Apple iPhone 15 Pro | 393 x 852 | 1179 x 2556 | 6.1″ | 3.0 | 461 | 153 | Apple iPhone 15 Pro |
| Apple iPhone 15 Pro Max | 430 x 932 | 1290 x 2796 | 6.7″ | 3.0 | 460 | 153 | Apple iPhone 15 Pro Max |
| Apple iPhone 5 | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | Apple iPhone 5 |
| Apple iPhone 5c | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | Apple iPhone 5c |
| Apple iPhone 5s | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | Apple iPhone 5s |
| Apple iPhone 6 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone 6 |
| Apple iPhone 6s | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone 6s |
| Apple iPhone 6s Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | Apple iPhone 6s Plus |
| Apple iPhone 7 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone 7 |
| Apple iPhone 7 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | Apple iPhone 7 Plus |
| Apple iPhone 8 | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone 8 |
| Apple iPhone 8 Plus | 414 x 736 | 1080 x 1920 | 5.5″ | 3.0 | 401 | 134 | Apple iPhone 8 Plus |
| Apple iPhone SE | 320 x 568 | 640 x 1136 | 4.0″ | 2.0 | 326 | 163 | Apple iPhone SE |
| Apple iPhone SE (2020) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone SE |
| Apple iPhone SE (2022) | 375 x 667 | 750 x 1334 | 4.7″ | 2.0 | 326 | 163 | Apple iPhone 14 SE 2022 |
| Apple iPhone X | 375 x 812 | 1125 x 2436 | 5.8″ | 3.0 | 458 | 153 | Apple iPhone X |
| Apple iPhone XR | 414 x 896 | 828 x 1792 | 6.1″ | 2.0 | 326 | 163 | Apple iPhone XR |
| Apple iPhone XS Max | 414 x 896 | 1242 x 2688 | 6.5″ | 3.0 | 458 | 153 | Apple iPhone XS Max |
Tailwind's current descriptors:
| Breakpoint prefix | Minimum width | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { ... } |
| md | 768px | @media (min-width: 768px) { ... } |
| lg | 1024px | @media (min-width: 1024px) { ... } |
| xl | 1280px | @media (min-width: 1280px) { ... } |
| 2xl | 1536px | @media (min-width: 1536px) { ... } |
so... I commented here asking if someone could help me understand the reasoning: https://github.com/tailwindlabs/tailwindcss/discussions/11718