Spacing utilities to px instead of rem by default

[KocsisGabor]

Relevant but closed issue on this topic. #800

I'm honestly surprised, I must assume there's something I don't know because choosing rem for spacing does not make any sense to me.

Apparently rem was chosen because it allows proportional resizing of everything, in other words, it allows us to zoom, exactly like how every browser allows their every user to zoom.
Is there a website which relies on the root font-size to change the zoom? I doubt it, it seems pointless to me.

Why do we have rem units?

If the websites are using rem units for font-sizes, then the users can change the default browser font-size in case they have poor eyesight, which allows them to consume content easier on the internet. This is literally the only reason we have rem units!

Most web developers probably have perfect eyesight because changing the default browser font-size most of the time either has no effect or it zooms the websites. This makes this setting rather useless since pretty much every browser has a dedicated default zoom feature anyway, and the browser zoom can easily be overwritten by the user, for example, with ctrl+wheel.

I don't really understand why most developers use this unit incorrectly. The only change needed when the rem units became supported was to change some font-size to rem instead of pixels. This is pretty much a ~30 line change in CSS for complex websites. Instead, the developers decided to either overwrite the root font-size so they can pointlessly use rem units just because they read somewhere that they should, or they don't overwrite it but use rem everywhere again just to lose its intended functionality.

Why did the Tailwind developers think that it would be a good idea to change the border width on a button, a shadow under a card, or the distance between nav items just because the user has changed the default font-size?

What would be the effect of this change?

Currently, changing the browser default font-size just zooms exactly like how the browser can zoom.

If the spacing units were to change to pixels, nothing would change if the user didn't touch the default font-size. Pretty much every Tailwind website would look exactly the same. However, if the user has changed the default font-size, for example, to 20 pixels, this would mean that most Tailwind websites would show text in 125% size instead of zooming the websites to 125%. This should be the intended effect of changing the default font-size, not a redundant zoom.

Tailwind is popular, so if the spacing units were to change to pixels instead of rem in Tailwind, that would instantly solve this problem on countless websites.

Would this break websites? Maybe, there are surely websites where the root font-size has been overwritten for some reason, but pretty much all of these websites use rem incorrectly. There are probably also websites where they overwrite the root font-size but also allow the user to change it with a button or something. Currently, this button in these websites zooms the content, and after the change, it would have the probably intended effect of changing the font-size (this is a positive effect in my opinion).

The users who decide to change the default font-size would have a better experience on the internet.

What needs to be changed?

The default config should have this theme.spacing property:

spacing: {
	px: '1px',
	0: '0px',
	0.5: '2px',
	1: '4px',
	1.5: '6px',
	2: '8px',
	2.5: '10px',
	3: '12px',
	3.5: '14px',
	4: '16px',
	5: '20px',
	6: '24px',
	7: '28px',
	8: '32px',
	9: '36px',
	10: '40px',
	11: '44px',
	12: '48px',
	14: '56px',
	16: '64px',
	20: '80px',
	24: '96px',
	28: '112px',
	32: '128px',
	36: '144px',
	40: '160px',
	44: '176px',
	48: '192px',
	52: '208px',
	56: '224px',
	60: '240px',
	64: '256px',
	72: '288px',
	80: '320px',
	96: '384px',
}

Most Tailwind users need to change nothing if this change goes live. Those developers who have actually affected website needs to change their Tailwind config to have the rem spacing values.

Conclusion

Even if we assume that for some reason an unreasonable amount of websites need their interface to zoom when a user has changed the default font-size, this change would still be a positive change because the default should be what's best in most cases, not what can be useful in some weird edge cases especially when it takes about ~1 minute to change the pixel values to rem for a developer in their own config file.

Important: This change would not affect font-sizes and some few other properties like max-w-md, which would still use rem units. This change would only affect the spacing properties like margin and some other properties like border-width.

Sorry if this was a bit aggressive, I'm just really frustrated that I needed to make this issue at all.