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!