顺风响应断点不起作用

Posted

技术标签:

【中文标题】顺风响应断点不起作用【英文标题】:Tailwind responsive breakpoints are not working 【发布时间】:2020-05-30 00:27:39 【问题描述】:

我无法弄清楚为什么覆盖在我的项目中不起作用。我正在尝试使我的网站在移动设备上可读,目前它正在显示具有桌面大小的按钮。我正在使用顺风并做出反应。我的按钮组件是:

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

但是 text-xs 仅在我删除 sm: 前缀时才有效。我试过包括

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

在我的配置文件中,但这并没有改变任何东西。

【问题讨论】:

【参考方案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

【讨论】:

以上是关于顺风响应断点不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Tailwindcss 响应式断点不起作用

顺风 css flex-col-reverse 不起作用

TailwindCSS 响应式断点在 Vue 中不起作用

vscode顺风css智能感知不起作用

边框样式在顺风悬停时不起作用

为啥“禁用:”顺风前缀在我的反应应用程序中不起作用?