'Responsive Tailwind css by Updating Root Font Size (thus rem) Based on @media Query?

I've been working with tailwind in my Vue project and overall its really good, but its a bit annoying to always write sm:w-10 lg:w-10 2xl:w-30 (etc) for all of my classes.

So I was thinking, since the width is based on rems, wouldn't it make more sense to just update the root font size (which determines rem value) at the lg xl 2xl breakpoints, rather than resetting them on each tag?

I think I could achieve that with something like this on the root component:

html { // changed from body to html
    font-size: 16px;


@media screen and (max-width: 1024px) {
  html { 
    font-size: 24px;
  }
}

But I'm skeptical about doing this as the Tailwind docs don't mention it at all. Can anyone tell me if/why this would be a bad idea?

cssresponsive-designtailwind-css


Solution 1:[1]

Just add it to the parent class then everything under applies the same text modifiers.

Eg below increases the size of text as the screen width goes up for all child divs

<div class='text-base md:text-lg lg:text-lg xl:text-xl'
  ... All text content inside here will responsively change size
</div>

See below links for more info

Font Size

Responsive Design

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 wanna_coder101

Related Questions