css - Tailwind CSS - 小媒体查询被大屏幕媒体查询覆盖

Question

我正在处理一个 Nextjs + Tailwind CSS 元素，我遇到了一些屏幕响应问题。

在我的元素中，每个 Tailwind 断点都工作正常，除了“sm”及以下。

这是我的示例代码:

<div className="bg-red-200 sm:bg-white md:bg-gray-700 lg:bg-green-600 xl:bg-blue-600">

使用上面的代码，如果我在检查模式下重新缩放我的屏幕，从 xl 到 md 的每个断点都在工作，但在 md 下面我看不到任何变化。

在开发者模式下检查后，我发现小屏幕媒体查询被大屏幕媒体查询覆盖。

截图如下:

global.css

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    * {
      cursor: none;
    }
    
    @font-face {
        font-family: "Neue Montreal";
        src: url("/fonts/NeueMontreal-Regular.otf");
    }
    @font-face {
        font-family: "Neue Montreal Bold";
        src: url("/fonts/NeueMontreal-Bold.otf");
    }
    @font-face {
        font-family: "Neue Montreal Light";
        src: url("/fonts/NeueMontreal-Light.otf");
    }
    @font-face {
        font-family: "Neue Montreal Medium";
        src: url("/fonts/NeueMontreal-Medium.otf");
    }
    
    body {
      font-family: Neue Montreal, sans-serif;
    }

tailwind.config.js

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: [
        "./app/**/*.{js,ts,jsx,tsx}",
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
      ],
      theme: {
        extend: {},
      },
      plugins: [],
    }

请帮助我找到如何在较小的屏幕尺寸上看到变化，谢谢。

Answer 1

我想我也遇到了同样的问题。小断点在 pages/下工作正常，但它在新的 app/文件夹下不起作用，相反我只是得到了中断点。添加带有像这样的视口(viewport)元标记的头文件为我整理好了

export default function Head() {
  return (
    <>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </>
  );
}

https://beta.nextjs.org/docs/api-reference/file-conventions/head