小编Die*_*ego的帖子

响应式字体大小不适用于 Tailwind 和 ReactJS

我对这个问题感到非常绝望。我完全理解移动优先的概念,并且能够使我的网站布局响应式,但是,当我应用断点和屏幕尺寸更改时,字体大小不会更改。

这是我无法开始工作的一个简单示例。在这两种情况下,当超过断点时,颜色会完美改变,但文本大小保持不变(text-sm)。

<div className="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400">
     Hi
</div>
Run Code Online (Sandbox Code Playgroud)

我尝试覆盖 tailwind.config.js 上的 fontSize ,得到相同的结果:字体大小没有改变......

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",
      },
   }
},
Run Code Online (Sandbox Code Playgroud)

有人可以帮助我吗?非常感谢!

javascript css responsive-design reactjs tailwind-css

6
推荐指数
1
解决办法
7739
查看次数