我对这个问题感到非常绝望。我完全理解移动优先的概念,并且已经能够使我的网站布局具有响应性,但是当我应用断点并且屏幕尺寸发生变化时,字体大小不会改变。
以下是一个简单的例子,我无法让它正常工作。在两种情况下,当超过断点时颜色变化得很好,但文本大小保持不变(text-sm)。
<div className="text-sm sm:text-lg bg-red-400 sm:bg-yellow-400">
Hi
</div>
我尝试在 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",
},
}
},
有人可以帮我吗?非常感谢!