Html body is not getting full width in tailwindcss · Issue #2788 · tailwindlabs/tailwindcss

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

坐怀不乱的乌冬面 · 这个字段我明明传了呀，为什么收不到 - ...· 3 月前 ·

狂野的麦片 · 手机怎么传书给kindle-百度经验· 4 月前 ·

阳光的手套 · 南京航空航天大学2012年教师公派出国（境） ...· 4 月前 ·

跑龙套的玉米 · 如何使用Pandas只遍历DataFrame ...· 6 月前 ·

旅行中的红茶 · 探索赋能产业链发展新路径· 6 月前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

@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 class="lg:hidden">
            <button
              type="button"
              class="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
                class="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
            </button>
      <div class="mr-16">
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
            key={link.label}
            class="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md"
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 className="lg:hidden">
            <button
              type="button"
              className="text-gray-400 mt-1 hover:text-white focus:text-white focus:outline-none"
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
            </button>
      <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">
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
        <a className="p-2 pr-2 uppercase tracking-widest font-semibold hover:bg-indigo-900 hover:text-gray-400 rounded-md">
  FrancelLeBoss, rattanakneariroth, ClemCornet, and ManindraDeMel reacted with thumbs up emoji
  rattanakneariroth, mCornish, and ManindraDeMel reacted with heart emoji
    All reactions
@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