tailwindcss中的Html正文未获得全宽

Question

我是个新手。但我在这里有个问题。

看看屏幕截图，背景颜色没有在导航栏中应用。此外，整个html正文在中小型屏幕上也不是全宽的。

我不明白的是，我仍然没有使用过像md，sm或者lg这样的响应式类。但是宽度有严重的问题，我试着使用顺风类的w-full和w-screen。它们都不起作用。下面是这个问题的屏幕截图

​

你可以在这里找到代码：https://codesandbox.io/s/focused-curran-jdyup

提前谢谢。

编辑：

好了，看看这个GIF，伙计们。

​

​

我正在尝试在Tailwind Play中重现这个问题。但是我做不到，然后我注意到同一行代码在Tailwind Play中运行得很好，但在nextjs中就不行了。我不知道这里有什么问题，但我在下面分享了Tailwind Play和NextJS代码。顺风播放：

<div class="flex justify-between items-center p-5 bg-indigo-800 text-white">
      <div class="ml-16">
        <div class="flex items-center">
          <div class="">
            <h4 class="tracking-widest uppercase">GrayScale</h4>
          </div>
          <div class="lg:hidden">
            <button
              type="button"
              class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
            >
              <svg
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="mr-16">
          <a
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
          >
            Home
          </a>
          <a
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
          >
            Home
          </a>
          <a
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
          >
            Home
          </a>
          <a
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
          >
            Home
          </a>
          <a
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
          >
            Home
          </a>
      </div>
    </div>

NextJS代码：

export default function IndexPage() {
  return (
    <div className="flex justify-between items-center p-5 bg-indigo-800 text-white">
      <div className="ml-16">
        <div className="flex items-center">
          <div className="">
            <h4 className="tracking-widest uppercase">GrayScale</h4>
          </div>
          <div className="lg:hidden">
            <button
              type="button"
              className="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div className="mr-16">
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
          Home
        </a>
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
          Home
        </a>
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
          Home
        </a>
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
          Home
        </a>
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
          Home
        </a>
      </div>
    </div>
  );
}

Answer 1

​

​

​

​

您应该为这些溢出容器的列考虑新的响应场景。或者，您应该为容器提供overflow: hidden。问题出在他们身上。

Answer 2

我遇到了同样的问题，并找到了答案here。

基本上，“meta”viewport元素为浏览器提供了如何控制页面尺寸和缩放的指令。因此，您需要添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

我也有同样的问题。我的诀窍是' max -w- max‘把它放到你的容器中(而不是body标签)，这使得最大宽度等于内容的最大宽度(所以右边没有更多的白色)。