CODEWITHSUNDEEP
cssreactjstailwind-css
kingkobain99
kingkobain99

Reputation: 229

Scaling tailiwnd font size in reactjs globally

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

Upvotes: 1

Views: 360

Answers (1)

Dimitar
Dimitar

Reputation: 1180

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.

Upvotes: 1

Related Questions