我遇到了一个问题,但我尚未在任何地方找到任何问题。
当我在移动设备上使用内边距或边距,并且想要在较大屏幕上更改这些内边距/边距时,我为移动设备设置的基本值将保持不变,并覆盖不同断点处的特定值。
这是我在调试器中可以看到的内容: 正如您所看到的 py-3 值,它保留并覆盖适用于 md 断点的 py-0。
这是移动版本
这是桌面版本
这是我的代码,py-3
和 md:py-0
应用于按钮:
<div className="..."> {languages.map((lng) => ( <button className="px-2.5 py-3 md:py-0 text-xs leading-5 text-gray-500 text-center"> {lng.name} </button> ))} </div>
我使用 taildwindcss 进行经典的 next.js 安装,没有任何扩展/主题替换。我的 css 文件中没有任何地方可以重写这些类。
我有什么遗漏的吗?
编辑:我尝试应用“!”在我的 py-0
前面: md:!py-0
但它仍然是一样的。即使正确添加了 !important 关键字,它仍然会被覆盖。
P粉5117578482024-01-18 00:05:55
!important
赋值会覆盖以下内容(因此在正常情况下
覆盖)@media { }
让您的 .py-3 { }
正确显示,无需需要 !important
。