CODEWITHSUNDEEP
htmlcsstailwind-css
leaven
leaven

Reputation: 11

How expand flexbox to padding in tailwind

how do i put that flexbox on all that blue background

I attach a picture of what it looks like:

enter image description here

Here Code with Tailwind-CSS:

<!-- Tailwind + Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel=”stylesheet” href=”https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css”>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">
  <div class="flex justify-between text-white-grayed">
    <a class="pl-4 pr-4 hover:text-white-default border-r border-white-default" href="">[email protected]</a>
    <a class="hover:text-white-default" href="">+000 000 000 000</a>
  </div>
  <div>

  </div>
</header>

Upvotes: 1

Views: 992

Answers (2)

Philipp Meissner
Philipp Meissner

Reputation: 5482

You are almost there. Your header is a flexbox already and takes the full width. Your first child (div) however only takes as much space as it needs. You need to add w-full which makes the div take up all the available width and justifies its items inside respecting the entire width.

<!-- Tailwind + Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel=”stylesheet” href=”https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css”>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<!-- Body -->
<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">
  <div class="w-full flex justify-between items-center text-white-grayed">
    <a class="pl-4 pr-4 hover:text-white-default border-r border-white-default" href="">[email protected]</a>
    <a class="hover:text-white-default" href="">+000 000 000 000</a>
  </div>
</header>

Upvotes: 2

Helping Hands
Helping Hands

Reputation: 150

Only remove flex class from header

use this

<header class="bg-blue-default justify-between p-3.5 text-xs m-0">

instead of

<header class="bg-blue-default flex justify-between p-3.5 text-xs m-0">

Upvotes: 1

Related Questions