next.js 断点值被tailwindcss上的移动的值覆盖

envsm3lx  于 2023-04-05  发布在  其他
关注(0)|答案(1)|浏览(169)

我有一个问题,我还没有找到任何问题的任何地方。
当我使用移动的的填充或边距,并且我想在更大的屏幕上更改这些填充/边距时,我为移动设备设置的基本值会保留并覆盖不同断点处的特定值。
以下是我在调试器中看到的:正如您在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>

我在一个经典的next.js安装上,没有任何extends/theme替换,我的css文件中没有覆盖这些类。
我是不是漏掉了什么?
编辑:我试着在我的py-0前面应用一个“!”,就像这样:md:!py-0但还是一样的。即使!important关键字被正确添加,它仍然被覆盖。

dsekswqp

dsekswqp1#

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

  • 无需 * !important即可正确显示.py-3 { }

相关问题