Extra small breakpoint

[quick007]

With multiple mobile devices under 362, I think that there should be a new breakpoint: xs. xs would be all devices over 362px. I'm mainly asking for this because of what you see below:

To be clear, those are all from the Galaxy fold, but making a breakpoint for just the galaxy fold seems a bit dumb, so I added 80px over the galaxy fold to include a number of other phones. I also wanted to make it useful to more people who don't care about the 3 people that use the galaxy fold and have it make more sense as a global breakpoint versus me just adding it to my config.

[quick007]

Those issues could probably be fixed with break-all, but I don't want to ruin the experience for more standard sized phones

[NikitaIT]

In truth, the division into screen sizes sm, md, lg itself is conceptually incorrect. This division is conceptual rather than real.

Most of the companies where I worked used the rule of setting media for each element separately. This is already part of the specification CSS Container Queries.

In your specific case, you just need the child blocks to take the width of the parent, this is your layout problem, not tw. You can use non-breaking space and word-wrap: break-word.