Собственный медиа-запрос не будет работать при использовании попутного CSS и Next JS. ⇐ CSS

[Anonymous]

Здравствуйте, я использую приложение nextJS и Tailwind CSS, в локальной версии оно работает правильно и нет проблем, однако, когда я развертываю его на вершине, медиа-запрос не вступает в силу, как если бы он был проигнорирован. Спасибо большое

Код: Выделить всё

{({ open }) => (


{open ? "Close Menu" : "Open Menu"}

{open ? (

) : (

)}

)}

Это моя структура HTML, а ниже — мой код для медиа-запроса при просмотре на маленьком экране.

Код: Выделить всё

@media screen and (max-width: 1023px) {
.menu-link {
display: none;
}

.mobile {
display: inherit;
justify-content: left;
margin-left: -10rem;
}
}

@media screen and (max-width: 768px) {
.mobile {
display: inherit;
margin-left: -2rem;
}
}

@media screen and (max-width: 639px) {
.mobile {
justify-content: end;
}
}

В локальном режиме он отображает это и кажется, что он работает нормально


Однако, когда я загрузил его на Vercel Tru github он не будет отображаться должным образом



Подробнее здесь: https://stackoverflow.com/questions/791 ... nd-next-js