Proper approach to responsive text?

[mngyuan]

I was in the middle of adding text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl classes to my text to get it to scale responsively when I realized this feels like the wrong approach. Isn't the point of rem units to hierarchically define your text sizes relative to the root element's font-size, and then scale the root element's font-size, not the rems of your elements? i.e.

html {
  font-size: 16px;
}

/* sm */
@media (min-width: 640px) {
  html {
    font-size: 12px;
  }
}

/* md */
@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* etc... */

what is the right way to be approaching responsively scaled text with tailwind? changing the root element's font-size feels right to me but tailwind doesn't provide classes to do that and the docs somewhat confusingly suggest by default to use the sm md lg helper breakpoint classes.

[marcia-lima]

The following discussions might be related to yours:

• #3108
• #2638
• #4035