You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've seen a few discussion items (#11778 and #13514 ) already advocating for changes to the default Tailwind breakpoints, but I thought I'd provide some data to backup these argument.
Set Studio ran an experiment on viewport sizes, where they gathered over 120,000 data-points with over 2,300 unique viewport sizes and shared their data.
I downloaded their data, crunched the numbers, and came up with this:
As you can see, the vast majority (63%) of viewport sizes fall into a breakpoint range (>= 320 and < 433) that currently doesn't exist in Tailwind. As you may have already figured out, these are the viewport widths of most smartphones.
Yes, you can currently target all devices smaller than 640px by not using a breakpoint prefix, but I would argue that there's a huge difference between a viewport of 320px and 639px (i.e. x2), so I might want to style those differently.
Speaking of the "sm" breakpoint of 640px, the data shows only 92 viewports of that size, so I don't really understand the reasoning for having this as a breakpoint. However, I realize that changing it now would potentially break a lot of layouts.
There were very few sizes below 320px, but I imagine that might grow with watches and wearables.
At the other end of the scale, the next largest group of viewport sizes are those >= 1920, where the majority of desktop monitors are 1920px wide. As ultra-wide monitors become more prevalent, we may want to start designing layouts that take advantage of the extra width and limit vertical scrolling.
Yes, I can add my own custom breakpoints, which is great, but why not expand the defaults to include the largest groups of viewport sizes? Adding xxs, xs and 3xl would not break any existing layouts and provide more options without customization.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I've seen a few discussion items (#11778 and #13514 ) already advocating for changes to the default Tailwind breakpoints, but I thought I'd provide some data to backup these argument.
Set Studio ran an experiment on viewport sizes, where they gathered over 120,000 data-points with over 2,300 unique viewport sizes and shared their data.
I downloaded their data, crunched the numbers, and came up with this:
As you can see, the vast majority (63%) of viewport sizes fall into a breakpoint range (>= 320 and < 433) that currently doesn't exist in Tailwind. As you may have already figured out, these are the viewport widths of most smartphones.
Yes, you can currently target all devices smaller than 640px by not using a breakpoint prefix, but I would argue that there's a huge difference between a viewport of 320px and 639px (i.e. x2), so I might want to style those differently.
Speaking of the "sm" breakpoint of 640px, the data shows only 92 viewports of that size, so I don't really understand the reasoning for having this as a breakpoint. However, I realize that changing it now would potentially break a lot of layouts.
There were very few sizes below 320px, but I imagine that might grow with watches and wearables.
At the other end of the scale, the next largest group of viewport sizes are those >= 1920, where the majority of desktop monitors are 1920px wide. As ultra-wide monitors become more prevalent, we may want to start designing layouts that take advantage of the extra width and limit vertical scrolling.
Yes, I can add my own custom breakpoints, which is great, but why not expand the defaults to include the largest groups of viewport sizes? Adding xxs, xs and 3xl would not break any existing layouts and provide more options without customization.
Beta Was this translation helpful? Give feedback.
All reactions