how do i put that flexbox on all that blue background
I attach a picture of what it looks like:
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>CodePudding user response：
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>CodePudding user response：
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">
CodePudding user response：
In app.css there is only the font set as it should be and in app there is tailwind I'm trying to make those white lines all over the blue background and I would like to put everything in one row. I added an icon and it is in a new line even though I have a defined flex-row Prikladám celý kód:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 rel="stylesheet" href="style.css">
<link rel="stylesheet" href="app.css">
<title>Title</title>
</head>
<body>
<header class="bg-blue-default w-full flex justify-between p-3.5 text-xs m-0">
<div class="flex flex-row text-white-grayed pl-6">
<a class="pl-3 pr-3 hover:text-white-default border-r border-l border-white-default" href="">[email protected]</a>
<a class="hover:text-white-default pl-3 pr-3 border-r border-1 border-white-default" href=""><i data-feather="phone" width="12" height="11"></i> 000 000 000</a>
</div>
<div class="pr-6 text-white-grayed">
<a class="hover:text-white-default pr-6" href="">Nájdi bicykel</a>
<a class="hover:text-white-defaul pr-6" href="">Predajcovia</a>
<a class="hover:text-white-default pr-6" href=""> Magazin</a>
<a class="hover:text-white-default pr-6" href="">Pre predajcov</a>
<a class="hover:text-white-default pr-6" href="">Kontakt</a>
<a class="hover:text-white-default pr-6" href="">FB</a>
<a class="hover:text-white-default pr-6" href="">IG</a>
</div>
</header>
</body>
<script>
feather.replace()
</script>
</html>