Html body is not getting full width in tailwindcss

[theprantadutta]

Hello, I am new in tailwindcss. But I am having an issue here.

Look at the screenshots, the background color is not applying in the navbar. Also the whole html body is not getting full width in medium and small screens.

What I don't understand is that I still haven't used any of the responsive classes from tailwindcss like md, sm or lg. But there are serious problems with width and I tried using tailwind class of w-full and w-screen. None of them work.
Here's the screenshot of the problem

You can find the code here: https://codesandbox.io/s/focused-curran-jdyup

Thanks in Advance.

[PaulMorel]

Your Code Sandbox link doesn't work. Maybe try with https://play.tailwindcss.com/ ?

[theprantadutta]

@PaulMorel link updated, check now

[deadcoder0904]

@prantadutta it looks fine to me

[theprantadutta]

@deadcoder0904 just try it in the medium and small screen

[deadcoder0904]

@prantadutta still works for me 🤷‍♂️

maybe make a minimal repro on Tailwind Play. Codesandbox loads too slow for me at least :(

[theprantadutta]

@deadcoder0904 Sorry I can't recreate the problem in Tailwind Play. So I created this GIF.

[deadcoder0904]

I am not sure which file to look at? Can you point me to where your width-related code is?

[theprantadutta]

@deadcoder0904 that's the thing. I can't find any width related code. Actually what happened is that I created this page first with just plain tailwind classes. Then I thought about making it responsive. And this is what I see the first time I opened my dev tools.

[theprantadutta]

@deadcoder0904 @PaulMorel ok, look at this GIF, guys.

I am trying to recreate the problem in Tailwind Play. But I couldn't. Then I noticed that the same line of code works perfectly in Tailwind Play but not with nextjs. I don't know what the problem here is but I shared both the Tailwind Play and NextJS code below.
Tailwind Play:

<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 Code:

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>
  );
}

[deadcoder0904]

@prantadutta Tailwind Play might be using some kind of Normalizr or your Next code might be the issue but still not a Tailwind issue. I recommend asking on StackOverflow :)

[theprantadutta]

@deadcoder0904 I also asked on Stackoverflow. I haven't got any response yet. But I am using the default template of nextjs examples with tailwindcss. So shouldn't it be normailized? Also, I think tailwind automatically normalizes my code.

[deadcoder0904]

@prantadutta no idea

[PaulMorel]

It seems to be your input in your footer that's causing your overflow.

[theprantadutta]

@PaulMorel @deadcoder0904 Thanks for helping me out. It turned out I used some containers in different sections. That's how the elements were overflowing. I am closing this issue. Also, I am new to tailwind so any tips on avoiding this kind of errors?

[deadcoder0904]

@prantadutta This has nothing to do with Tailwind. Tailwind is just knowing CSS well enough so you might want to learn CSS properly. It's okay though, even after 5 years, CSS is still my hardest language 😂

[Mixpeal]

Adding overflow-hidden to the main container solved it for me

[rattanakneariroth]

@Mixpeal Thank you it worked just adding overflow-hidden

[kharenamana]

@PaulMorel @deadcoder0904 Thanks for helping me out. It turned out I used some containers in different sections. That's how the elements were overflowing. I am closing this issue. Also, I am new to tailwind so any tips on avoiding this kind of errors?

can you please tell me what exactly you changed as I'm facing the same issue