断点值被 tailwindcss 上的移动值覆盖
P粉135292805
P粉135292805 2024-01-17 09:13:26
0
1
510

我遇到了一个问题,但我尚未在任何地方找到任何问题。

当我在移动设备上使用内边距或边距,并且想要在较大屏幕上更改这些内边距/边距时,我为移动设备设置的基本值将保持不变,并覆盖不同断点处的特定值。

这是我在调试器中可以看到的内容: 正如您所看到的 py-3 值,它保留并覆盖适用于 md 断点的 py-0。


这是移动版本


这是桌面版本


这是我的代码,py-3md: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粉135292805
P粉135292805

全部回复(1)
P粉511757848

!important 赋值会覆盖以下内容(因此在正常情况下 覆盖)@media { }

让您的 .py-3 { } 正确显示,无需需要 !important

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板