Responsive Font Size not working on Tailwind & ReactJS

Question

I am absolutely desperate with this problem. I fully understand the concept of mobile-first and have been able to make the layout of my website responsive, however, the font-size does not change when I apply breakpoints and the screen size changes.

Here is a simple example of what I can't get to work. In both cases the color changes perfectly when the breakpoint is exceeded, but the text size remains the same (text-sm).

<div className="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400">
     Hi
</div>

I tried overwriting the fontSize on tailwind.config.js and I get the same result: font size does not change...

theme: {
   extend: {
      fontSize: {
        xs: "0.75rem",
        sm: "0.875rem",
        base: "1rem",
        lg: "1.125rem",
        xl: "1.25rem",
        "2xl": "1.5rem",
        "3xl": "1.875rem",
        "4xl": "2.25rem",
        "5xl": "3rem",
        "6xl": "4rem",
      },
   }
},

Anyone can help me? Thank you very much!

Vaginate

Can you inspect the element at that screen size and see if the css is there? You can also look at the generated css file to see if that class exists. If not then there would be an issue at compile time. – Funchal

I got the same problem. Have you found your solution? – Gobbler

Answer 1

It is working.

<div class="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400">
     Hi
</div>

theme: {
   extend: {
      fontSize: {
        xs: "0.75rem",
        sm: "0.875rem",
        base: "1rem",
        lg: "1.125rem",
        xl: "1.25rem",
        "2xl": "1.5rem",
        "3xl": "1.875rem",
        "4xl": "2.25rem",
        "5xl": "3rem",
        "6xl": "4rem",
      },
   }
},

I'm sharing with you a play.

https://play.tailwindcss.com/x5IJCwX89S

Temperate

You never said what you fixed if anything??? A good answer would advise the problem or if there is no problem, people now have to inspect all of you code to understand the difference if any. – Octosyllabic

This answer is like my wife saying my phone is on the table when we have 10 tables in the house. – Appleton

Answer 2

I had the same problem. In my specific case in my extremely long config I had defined fontSize twice, so it would only use one of them.

Propman