Я пытаюсь использовать медиа-запрос внутри моего файла globals.css
, чтобы настроить CSS для разных размеров экрана, но стиль моего медиа-запроса не отражается. Это работает, когда я использую встроенный стиль Tailwind, но я хочу, чтобы изменения применялись к конкретным тегам, поскольку я использую уценку. Независимо от того, где я просматриваю страницу документации Tailwind и Next.js, я не могу найти каких-либо уникальных правил между ними, которые не позволили бы моему медиа-запросу работать так, как я хочу. Как использовать медиа-запросы в файле global.css
Next.js с включенным Tailwind?
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: white;
margin: 50px 0px;
overflow-x: hidden;
}
@media screen and (max-width: 500) {
body {
background-color: black;
margin: 50px 0px;
overflow-x: hidden;
}
}
Возможно, вам не хватает единицы измерения для селектора медиазапросов, попробуйте изменить ее на 500px
вместо 500
:
@media screen and (max-width: 500px) {
body {
background-color: black;
margin: 50px 0px;
overflow-x: hidden;
}
}
Вы можете узнать больше о медиа-запросах и единицах в документации MDN.
Вы пытались добавить объект в медиа-запрос?
@media screen and (max-width: 500px) {