Tailwind和ReactJS上的响应式字体大小不起作用

Question

Tailwind和ReactJS上的响应式字体大小不起作用

javascriptcssreactjsresponsive-designtailwind-css

4

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

以下是一个简单的例子，我无法让它正常工作。在两种情况下，当超过断点时颜色变化得很好，但文本大小保持不变（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",
      },
   }
},

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

- Diego

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

我有同样的问题。你找到解决方案了吗？ - Tui

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- victoryoalli · Accepted Answer

它正在运行。

<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