[v4] Proposal: Change breakpoint intervals

[olach]

First, I noticed that the breakpoint units have been changed from px to rem in v4. That's a positive change.

However, I wonder if it’s time to reconsider the current breakpoint values:

sm: 640px
md: 768px
lg: 1024px
xl: 1280px
2xl: 1536px

I guess these values were established a long time ago when there were fewer device types. The screen size of the original iPad was for example 768x1024px.

From my own experience, I think these breakpoints are a little bit off. I always struggle to choose a good breakpoint range when building a responsive layout. Either the breakpoint triggers too early or too late.

I while ago, I came across an article talking about this. They explained the issue, and presented a simple yet effective solution. The article is several years old, but I think it is still valid today.

In short, instead of basing the breakpoints on some specific device widths, they create breakpoint intervals around groups of the most popular device widths. Following the advice an updated list of breakpoints should be:

sm: 600px
md: 900px
lg: 1200px
xl: 1500px
2xl: 1800px

Alternatively, for more granular control over smaller sizes:

sm: 600px
md: 750px
lg: 900px
xl: 1200px
2xl: 1500px

I realize this change would be a breaking change for v4, and I’m unsure if it’s worth implementing. Since users can easily customize breakpoints in their configuration, it may not be necessary. However, I wanted to share the idea, as it might be worth considering.

[whitespacecode]

You can change or add breakpoints in the tailwind.config so i don't think this should be changed for everyone