Add experimental 2xl breakpoint

[adamwathan]

This PR adds a new 2xl breakpoint behind an experimental additionalBreakpoint flag.

Adding bigger breakpoints is a really common Tailwind customization, and as devices continue to get bigger with higher resolution, I think we're going to eventually wish we had something a little bigger than 1280. Bootstrap is even adding a 1400px breakpoint in Bootstrap 5, so we're not alone in thinking an additional large breakpoint would be helpful.

I considered a few different sizes for different reasons:

• 1440px, because that's the default resolution of a 13" MacBook Pro and just generally a common screen size. I opted against this because it's only 160px wider than our 1280 breakpoint, and the jump from 1024 to 1280 is 256 so for the next jump to be smaller just didn't really make sense.
• 1680px, another common resolution (default on the 15" MacBook Pro, before the 16" model was released). This just felt like too far of a jump from 1280, and selfishly I run my 16" MBP at 1536px (which is the real retina mode), and it felt silly to me to add a breakpoint that I wouldn't benefit from on that display 👀

I settled on 1536px after looking at some Google Analytics results with @reinink for multiple sites we both run and noticing that it was a surprisingly popular resolution (more popular than 1440px in a lot of cases). It appears to be very common for Windows machines, and since it's also the exact resolution I run on my 16" MBP, and a nice even 256px jump over our 1280 breakpoint, it felt like a great choice. Wide enough to let you make significant changes vs a 1280 breakpoint, but not so wide that you can't trigger it on large laptop displays.

Going to keep this experimental for now in case any issues come up with the name 2xl, because it needs to be escaped in a weird way and I worry there may be some tooling out there that doesn't play nice with it, so lets test it for a bit to double check we're safe.

This increases the default file size significantly, but whatever, you should be removing unused styles anyways. I'm going to work on a PR for a "lite" mode with a significantly reduced bundle size soon for people who have to use Tailwind from a CDN and don't want to serve a large file.

[codebycorey]

Nice change, I was actually about to add this customization to my website since my laptop has a larger resolution than my other computer.

[paulovieira]

I've been there and arrived at the same conclusions (about choosing 1536px). It's been working well for me 👍

One important note about the naming:

identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

References:

• https://www.w3.org/TR/CSS21/syndata.html#characters
• https://mathiasbynens.be/notes/css-escapes

In practical terms the escaping done by tailwind seems to be working. But is it a good idea to break such a basic rule?

[LucaRed]

What about xxl? I know it doesn't really fit Tailwind conventions, but the naming shouldn't pose technical problems.

[adamwathan]

@paulovieira cool good to know that size has been working well for you!

Regarding the escaping stuff, the ship has definitely sailed for us on worrying about that rule I’m afraid, haha... that same section you pasted says that class names can’t contain “/“ or “:” for example which we aren’t going to be changing any time soon. But yeah does work well, there is something in the spec somewhere about how the escaping stuff works and is safe 👍🏻 I’m more worried about some PostCSS plugin somewhere that is popular that doesn’t account for this (has happened with focus visible plugin for example). I bet it’ll be fine 👀

[jacobdalamb]

Honestly don't know if I should switch back to default Tailwind screen sizes because I changed it to screens: { sm: '667px', md: '1024px', lg: '1080px', xl: '2560px', },

[brandonpittman]

I had a 1920px breakpoint in a project last year to handle stuff at and above iMac sizes.