响应字体大小在尾风和ReactJS上不起作用

Question

我绝对对这个问题感到绝望。我完全理解移动-优先的概念，并能够使我的网站布局响应，但字体大小不改变时，我应用断点和屏幕大小的变化。

以下是我无法工作的一个简单例子。在这两种情况下，当断点被超过时，颜色会发生完美的变化，但是文本大小保持不变(文本-sm)。

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

我试图在fontSize上覆盖tailwind.config.js，并得到了同样的结果:字体大小不会改变.

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",
      },
   }
},

有人能帮我吗？非常感谢!

Answer 1

起作用了。

<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",
      },
   }
},

我和你分享一出戏。

https://play.tailwindcss.com/x5IJCwX89S