Any problems with setting font-size to 62.5% and adjusting rem values?

[rrichetto]

I'm wondering if there are any potential issues in me setting my html font-size to 62.5% and then adjusting all rem values accordingly within the Tailwind config file. Is there anything I could break by doing this?

Note: I set font-size to 62.5% so that 1rem = 10px, making it easier to know that 1.5rem = 15px, 2.3rem = 23px, etc...

Here is what I've done:

@tailwind base;

html {
  font-size: 62.5%;
}

@tailwind components;

And then in the config file:

screens: {
      'xl': {'max': '120rem'}, // => @media (max-width: 1200px) { ... }
      'lg': {'max': '100rem'},
      'md': {'max': '80rem'},
      'sm': {'max': '60rem'},
      'xs': {'max': '40rem'},
},
spacing: {
      '0': '0',
      '1': '0.1rem',
      '5': '0.5rem',
      '10': '1rem',
      '15': '1.5rem',
      '20': '2rem',
      '25': '2.5rem',
      '30': '3rem',
      '40': '4rem',
      '50': '5rem',
      '60': '6rem',
      '70': '7rem',
      '80': '8rem',
      '90': '9rem',
      '100': '10rem',
      '120': '12rem',
      '150': '15rem',
},
fontSize: {
      10: '1rem',
      11: '1.1rem',
      12: '1.2rem',
      14: '1.4rem',
      16: '1.6rem',
      17: '1.7rem',
      18: '1.8rem',
      20: '2rem',
      22: '2.2rem',
      24: '2.4rem',
      30: '3rem',
      32: '3.2rem',
      48: '4.8rem',
},

[rrichetto]

I just realized that while my font sizes are working correctly, my max-width queries are not. For example, my 'xs': {'max': '40rem'} media query comes out to 640px, not 400. So it's still based on 16px. Can't figure out why.

[rrichetto]

As I work through it, I realize there's probably no reason for me to keep using 62.5%. With Sass it was nice because anytime I wanted to set a font-size, it was easy to know that 1rem = 10px. But with Tailwind I'd only need to set up everything once up-front, and never worry about it again.

[adamwathan]

Browsers treat rem units in media queries unintuitively I’m afraid, they always use the browser default font size not your root font size declared in your HTML element. The only unit that works in a perfectly predictable way with media queries is pixels.

[rrichetto]

Ok thanks. So I'll set media queries in px. Other than that, is there any problem declaring the rems as I have above (with 62.5% so 1rem = 10px)? I'm dealing with a design system given to me, so I can't go with all of Tailwinds default sizes. But I'd also like to avoid having to divide all my numbers by 16, if possible. Dividing by 10 is much easier, and I don't end up with numbers like 0.9375rem for setting 15px.

[florianbouvot]

i was thinking that em are better but I just read this https://adamwathan.me/dont-use-em-for-media-queries/

[NikitaIT]

In fact, there is a simpler argument why this does not work.
Font size is defined as the height from the baseline to the top border of the size pad:

In this case, media queries should be letter-wide: letter-spacing * font-weight * ... * rem x-paddings delta. OMG

But here's the problem, we can have different configurations of text on the page. So it would be at least somewhat logical only with CSS Container Queries

[MSSPL-KamalenduGarai]

I have overridden the base font-size value with 62.5% and its working fine but as all width, padding, margin and spacing are calculating the values depending on the base font size all are gone smaller. Is there any way to use font-size and may be line-height in accordance to modified 62.5%(10px) value but not to touch any other part of the css. We can fix those by extending but it seems that would be a huge task to do.

[benjaminv]

With tailwindcss prior v4 everything is fine. h-6 gets 24px albeit I'm doing html:{font-size: 62.5%}. However this starts to be an issue when using tailwindcss v4. h-6 gives me 15px due to root: {--spacing:.25rem}.
I'm currently then overriding using @theme {--spacing: initial; --spacing:.4rem } it brings back a 16px/rem conversion when compiling the spacing class variables.
Not sure if there will be other issues by doing so?