尾风响应断点不起作用

Question

我无法弄清楚为什么覆盖在我的项目中不起作用。我正在尝试让我的网站在移动设备上可读，此刻它正在显示具有桌面尺寸的按钮。我正在顺风而动。我的按钮组件是：

return <button className="sm:text-xs sm:h-1 redbtn" onClick={onClick}>{children}</button>

但是，只有删除了sm：前缀后，text-xs才起作用。我尝试包括

screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px'
        }

在我的配置文件中，但没有任何改变。

Answer 1

前缀为“ sm：”的想法是它们不适用于移动设备。如果您希望为移动设备设置样式，则只需从类名称中删除前缀，然后覆盖较大设备的样式，例如：

<button className="text-xs h-1 lg:text-lg xl:text-xl  redbtn">click me, I'm awesome</button>

那样，text-xs将在移动设备上运行，直到在更宽的屏幕上击中lg：text-lg为止，这会放大字体的大小。 在tailwindcss文档here

上了解有关此内容的更多信息