Custom HTML FontSize (rem unit)

[Powerplex]

The issue

By default, on most browsers, the standard is that that 1rem = 16px.

The rem unit is then used for various styles: font-size, line-height, spacing (margin, padding, etc), and so on.

This is a good a11y practice to use this unit because the user may update his browser settings to make things larger (poor eyesight, etc)

MUI has a nice feature that, imho, is missing to Tailwind: Custom HTML font size

Let's say we are building a design system with Tailwind. By default it uses the 1rem=16px standard.

But it's possible that websites using that design system have a different unit, like 1rem=10px (this one is very popular).

Proposal

It would be nice if a theme could accept a htmlFontSize key (ex: htmlFontSize: 10) that would apply a modifier on every rem value detected inside the themes, to set it to the appropriate value.

Example

My design system theme (base: 1rem=16px) has a token spacing.md = 1rem (so 16px).

A website with 1rem=10px consumes a component from that design system, with .p-md => Unfortunately the padding will be 10px instead of 16px.

With a htmlFontSize: 10 in my theme, spacing.md could be converted from 1rem to 1.6rem to match the codebase root font size.

WDYT ?