html正文在tailwindcss中没有得到全宽

Posted 2023-03-06

【中文标题】html正文在tailwindcss中没有得到全宽

【英文标题】：Html body is not getting full width in tailwindcss

【发布时间】：2021-03-02 12:00:51

【问题描述】：

我是 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>
  );

【问题讨论】：

如果你找到了解决办法，可以分享一下吗？

【参考方案1】：

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

【讨论】：

我试着给他们容器......但它没有用。另外，新的响应式场景是什么意思？

那么为什么我注释掉这些部分时问题仍然存在？

【参考方案2】：

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

基本上，“元”视口元素向浏览器提供有关如何控制页面尺寸和缩放的说明。所以你需要添加：

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

【参考方案3】：

我遇到了同样的问题。 对我来说，诀窍是'max-w-max'将它放到你的容器（而不是body标签），whick使最大宽度等于内容的最大宽度（所以右边不再有白色）。