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

【问题标题】：Responsive Font Size not working on Tailwind & ReactJS响应式字体大小不适用于 Tailwind 和 ReactJS
【发布时间】：2021-12-31 10:46:27
【问题描述】：

我对这个问题非常绝望。我完全理解移动优先的概念，并且已经能够使我的网站布局具有响应性，但是，当我应用断点并且屏幕大小发生变化时，字体大小不会改变。

这是一个我无法工作的简单示例。在这两种情况下，当超过断点时颜色会完美变化，但文本大小保持不变（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",
      },
   }
},

有人可以帮助我吗？非常感谢！

【问题讨论】：

你能检查那个屏幕尺寸的元素，看看css是否存在吗？您还可以查看生成的 css 文件以查看该类是否存在。如果不是，那么在编译时就会出现问题。

标签： javascript css reactjs responsive-design tailwind-css

【解决方案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

【讨论】：