Início / coding / Perguntas / 78356676
Accepted
bascott
Asked: 2024-04-20 08:49:56 +0800 CST

Como você usa consultas de mídia no CSS global Next.js com Tailwind?

  • 772

Estou tentando usar uma consulta de mídia dentro do meu globals.cssarquivo para ajustar meu CSS para diferentes tamanhos de tela, mas o estilo da minha consulta de mídia não está sendo refletido. Funciona quando uso o estilo embutido do Tailwind, mas quero que as alterações sejam aplicadas a tags específicas, já que estou usando markdown. Não importa onde eu olhe na página de documentação do Tailwind e do Next.js, não consigo encontrar nenhuma regra exclusiva entre os dois que impeça minha consulta de mídia de funcionar da maneira que desejo. Como faço para usar consultas de mídia no global.cssarquivo Next.js com o Tailwind habilitado?

globais.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;
    }
}
html

1 respostas

  1. Best Answer

    Talvez você esteja faltando a unidade do seu seletor de consulta de mídia. Tente alterá-la para 500pxem vez de 500:

    @media screen and (max-width: 500px) {
    body {
        background-color: black;
        margin: 50px 0px;
        overflow-x: hidden;
    }
}

    Você pode aprender mais sobre consultas de mídia e unidades na documentação do MDN.

    • 1

relate perguntas