CODEWITHSUNDEEP
csstailwind-css
parsecer
parsecer

Reputation: 5176

Tailwind: can't get the elements to fill the width

Fiddle: https://play.tailwindcss.com/epT13JJxnk

It looks like this:

enter image description here I need it to look like this:

enter image description here

How do I achieve it?

Fiddle code:

<div id="app" class=" border border-white
   h-screen font-sans   tracking-normal mt-10">
   <nav data-v-5e628c52="" class="pt-2 md:pt-1
      pb-1 px-1 mt-0 h-auto
      fixed w-full z-20 top-0">
      <div data-v-5e628c52="" class="flex flex-wrap items-center justify-between
         m-3 p-2 pl-6  ">
         <div data-v-5e628c52="" class="flex flex-wrap items-center justify-start"><a data-v-5e628c52="" href="#" class="header-item title-text light-text text-xl router-link-exact-active router-link-active" aria-current="page">Link1 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link2 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link3 </a><a data-v-5e628c52="" href="#" class="header-item pl-10 router-link-exact-active router-link-active" aria-current="page">Link4 </a><a data-v-5e628c52="" href="#" class="header-item pl-10">Link5 </a></div>
         <div data-v-5e628c52="" class="flex flex-wrap items-center justify-end ">
            <!----><!---->
            <div data-v-5e628c52="">
               <div data-v-24cf0f3c="" data-v-5e628c52="">
                  <div data-v-24cf0f3c="" class="  ">
                     <div data-v-24cf0f3c="" class="dropdown inline-block relative">
                        <button data-v-24cf0f3c=""><img data-v-24cf0f3c="" src="/img/some-image.png" class="  rounded-full border
                           border-gray-100 shadow-sm w-12
                           "></button>
                        <ul data-v-24cf0f3c="" class="right-0  dropdown-menu absolute hidden text-gray-800 pt-1">
                           <li data-v-24cf0f3c="" class=""><a data-v-24cf0f3c="" href="/user/test" class="rounded-t
                              py-2 px-4 block whitespace-no-wrap">Profile</a></li>
                           <li data-v-24cf0f3c=""><a data-v-24cf0f3c="" href="#" class="
                              py-2 px-4 block whitespace-no-wrap">Logout</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </nav>
   <div id="main-content" class=" border border-red   flex justify-center
      flex-col items-center space-between min-h-screen w-full
      mt-12 md:mt-12 pb-24 md:pb-5 p-5">
      <div>
         <div data-v-e33ade5c="" class="   ">
            <div data-v-87eacdd8="" data-v-e33ade5c="" class="w-full shadow-xl rounded-sm
               p-10 pb-5  m-10 pt-5 article flex flex-col
               content-between     flex-1 flex-grow  " name="46">
               <div data-v-87eacdd8="" class="flex flex-row justify-between">
                  <div data-v-87eacdd8="" class="cursor-pointer title-text article-title">last article</div>
                  <div data-v-87eacdd8="" class="article-date">4/22/2021</div>
               </div>
               <div data-v-87eacdd8="" class="pt-5 article-text  ">last article</div>
               <div data-v-87eacdd8="" class="flex flex-wrap mt-5 mb-2  ">
                  <div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="last" class="inline-flex mr-2 ">
                     <div data-v-09e62cea="" class="tag rounded-full p-2   "> last</div>
                  </div>
                  <div data-v-09e62cea="" data-v-87eacdd8="" tag="Hashtag" name="yes" class="inline-flex mr-2 ">
                     <div data-v-09e62cea="" class="tag rounded-full p-2   "> yes</div>
                  </div>
               </div>
               <div data-v-87eacdd8="" class=" font-bold light-text "> Comments: 0 </div>
               <!---->
            </div>
         </div>
      </div>
      <div id="up-button" class=" sticky text-xl cursor-pointer
         mt-auto ml-auto
         bottom-5 right-5 rounded-lg  p-5 "> UP </div>
   </div>
   <footer></footer>
</div>

EIDT:

I tried to add an extra wrapper with w-full as the answer suggests, but now the child div (gray) is too huge and goes outside the outer div id="app" (yellow). Also the UP button breaks: it's no longer small, but is very wide:

enter image description here https://play.tailwindcss.com/8XBRUdNaX2

Upvotes: 2

Views: 17327

Answers (4)

Prakash M
Prakash M

Reputation: 390

Remove items-center class from <div id="main-content">

Remove m-10 from <div class="" name="46">

Link

Upvotes: 1

kemp
kemp

Reputation: 703

  1. Change items-center to items-stretch on #main-content.
  2. Remove w-full from the item div[name=46]

See example: https://play.tailwindcss.com/TZQHATbdll

Upvotes: 2

Hans Spie&#223;
Hans Spie&#223;

Reputation: 945

The wrapper div needs a w-full class, too (as @Digvijay already pointed out). Then, some classes of the name="46" element must be removed, especially w-full, which applies a 100% width that is added to the padding defined on the element, adding up to more than 100%.

See the updated example: https://play.tailwindcss.com/1vDd7ToPLt

Upvotes: 2

Digvijay
Digvijay

Reputation: 8967

Just need to add class to a div. Also, adjust some paddings and you are good to go.

<div id="main-content">
    <div class="w-full">

Upvotes: 1

Related Questions