Html 正文在 tailwindcss 中没有获得全宽

Question

我是 tailwindcss 的新手。但我这里有一个问题。

查看屏幕截图，背景颜色未应用于导航栏中。此外，整个 html 正文在中小屏幕上并没有获得全宽。

我不明白的是，我仍然没有使用 tailwindcss 中的任何响应类，如 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

这是chrome开发者工具的问题。起初，这有效。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  

然而问题又回来了。

解决方案：事实 证明该页面内容太多，并且 chrome 没有等到所有内容加载完毕才设置视口大小。有一次我删除了一个大表的数据。一切都开始按需要工作。

我将用ajax加载内容并添加分页。

class="hidden" 在我的长数据表和加载后工作的另一件事。删除“隐藏”类。

Answer 2

您应该考虑针对这些列溢出容器的新响应方案。或者你应该给容器overflow: hidden。问题出在他们身上。