Using flexbox (tailwindcss: flex-1) how do I add background colour to WHOLE element not just the tex-CodePudding

Looking for some help with my tabs design. I use a flexbox which has two parts. The top part for the main content, and the bottom for 'tab' buttons that would change the main content data based on the tab selected.

I want to be able to hover over the button and I want the WHOLE div housing this element to be highlighted (Different background colour) and when selected to be permanently highlighted with a different colour.

Currently when I hover ONLY the text inside the div gets highlighted margin specified. How do I make the whole div change the background colour?

CodeSandbox

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex w-full text-sm text-center items-center bg-blue-500">
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Tab 1</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1">
        <div class="flex justify-center hover:bg-red-500 cursor-pointer">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>

CodePudding user response：

You need to make some minor adjustments to get this working since you are using a flexbox, where each div (Let's call it div-1) holds a sub-div which further contains the span element, we can convert div-1 to a flexbox with the direction set to be a column and further apply the flex-grow so that it occupies the full height of the parent div, along with flex-1 which already exists, this is because this div resides under the div whose flex-direction is specified to be row .flex-grow grows on y-axis when the flex-direction is column. The sub-div again needs to have the properties, align-items:center, justify-content:center, and flex-grow:1, so that the text within is centered and again, this div to occupy the full height of its parent div(div1 as per our example).

<template>
  <!-- CONTAINER -->
  <div
    class="flex-col bg-gray-200 w-11/12 rounded-xl border-2 m-auto pt-2 mt-2"
  >
    <!-- MAIN CONTENT -->
    <div class="flex pb-2 bg-green-500 py-10">MAIN CONTENT</div>
    <!-- Tabs -->
    <div class="flex text-sm text-center bg-blue-500">
      <div class="flex -1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span>Tab 1</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">short tab 2</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">Long Tab name 3</span>
        </div>
      </div>
      <div class="flex-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is super Long Tab name 4</span>
        </div>
      </div>
      <div class="flex-1 px-1 flex flex-col flex-grow hover:bg-red-500">
        <div class="flex justify-center items-center flex-grow">
          <span class="my-4">This is SUPER extra long tab name 5</span>
        </div>
      </div>
    </div>
  </div>
</template>