Single row height won't change

Question

im trying to learn tailwind and i did a layout with grid i want my navbar(which taking the first row space) to have only 32px but when i apply height on it, it won't change thank you.

export default function App() {
  return (
    <>
      <div className="grid grid-cols-4 gap-4 p-5 bg-teal-900 h-screen w-screen">
        <div className=" col-span-4 navbar row-span-1 h-8">
          <a href="#">Lien</a>
          <input type="search" name="" id="" />
        </div>
        <div className="col-span-1 row-span-1 bg-stone-400 order-3">2</div>
        <div className="col-span-1 row-span-1 bg-gray-400 order-4">3</div>
        <div className="col-span-2 row-span-2 bg-blue-300 order-2">1</div>
        <div className="col-span-2 row-span-1 bg-slate-400 order-5">4</div>
      </div>
    </>
  );
}

I tried to remove h-screen and w-screen but the layout not taking the whole page when i do that and i don't want to specify it in css file i want to use pure tailwind for learning it

Answer 1

Note that for the first item you are using h-8 which is 2rem. It is usually 32px but could change based on your root font size.

If you want the first grid row to be 2rem you'll need to specify the grid track's height, which is grid-rows-[2rem_1fr_1fr] in tailwind.

However, it seems like you want the height of the first row to follow the height of the item that is in the first row (which is 2rem in your case.) Instead of hard coding 32px/2rem, use grid-rows-[max-content_1fr_1fr] or grid-rows-[minmax(min-content,max-content)] depending on how you want to control the remaining rows.

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-rows-[minmax(min-content,max-content)] grid-cols-4 gap-4 p-5 bg-teal-900 h-screen w-screen">
  <div class="col-span-4 navbar row-span-1 h-8">
    <a href="#">Lien</a>
    <input type="search" name="" id="" />
  </div>
  <div class="col-span-1 row-span-1 bg-stone-400 order-3">2</div>
  <div class="col-span-1 row-span-1 bg-gray-400 order-4">3</div>
  <div class="col-span-2 row-span-2 bg-blue-300 order-2">1</div>
  <div class="col-span-2 row-span-1 bg-slate-400 order-5">4</div>
</div>