断点值被 tailwindcss 上的移动值覆盖

Question

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

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

这是我在调试器中可以看到的内容： 正如您所看到的 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 关键字，它仍然会被覆盖。

Answer 1

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

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