Issues with font changes and more in _base.scss

[Aetles]

The file assets/scss/partials/_base.scss contains this:

html {
  @apply antialiased;
  font-size: 15px;
  text-rendering: optimizeLegibility;

  @screen md {
    font-size: 18px;
  }
}

When I'm using this fine theme I'm removing this because it causes some unwanted and maybe unexpected issues with Tailwind and I just wanted to shine some light on it for others to see.

Tailwind uses the rem unit extensively and that means that all the spacing everywhere are affected by changes to font-size on html, since rem is by definition equal to the font-size on the root element. By default most browsers are using 16px as the base font-size if nothing else is set. If you look at the Default spacing scale in the Tailwind docs it assumes that 1 rem = 16px.

So a change to the base font-size like this will make every type of spacing smaller on mobile (because of font-size: 15px; and larger on medium and up (because of font-size: 18px;). That makes it much harder to design with pixels in mind, in my experience, especially when it varies with the media query.

A completely different issue in this CSS is the use of antialiased which according to some is not recommended any more.