In my react app, using tailwind css, is there any global settings i can adjust so that my fonts scale with the screen size. For example, at screens larger than 2xl, i would like my text-sm to be 1 rem instead of the default 0.875rem

CodePudding user response：

In your CSS you can add:

@media (min-width: 1536px) {
    .text-sm {
        font-size: 1rem !important;
    }
}

This will essentially overwrite the font-size property of any element which is tagget with the text-sm class.

The 1536px comes from the official Tailwind references which explain responsive design in detail.

You need to add !important in order to force the CSS to apply.