This is the output that tailwind is giving me instead of:
Here is the code block of the calendar style that I am currently working on. The code block in the <!--The section is not working --> is the thing that’s not working. I tried using the developer console and I don’t understand what’s the thing I did wrong.
<!-- Calendar Section Start -->
<section class="pt-24">
<div class="flex">
<div
class="calendar-container mx-10 my-5 rounded-md border border-black py-10"
>
<div class="appointment-counselor-container mx-5 flex justify-between">
<div class="text-2xl font-semibold text-green-700">
<h1>Appointments</h1>
</div>
<!-- Counselor toggle -->
<div class="relative select-none">
<!--The section is not working -->
<div
id="counselor-lists"
class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white"
>
<div class="my-auto">
<h1 id="selected-counselor">Counselor 1</h1>
</div>
<div class="text-lg">
<p>∨</p>
</div>
</div>
<div
id="dropdown-options"
class="absolute left-0 top-full mt-2 hidden w-full rounded border border-black bg-white"
>
<div
class="cursor-pointer px-4 py-2 hover:bg-green-400"
data-value="counselor1"
>
Counselor 1
</div>
<div
class="cursor-pointer px-4 py-2 hover:bg-green-400"
data-value="counselor2"
>
Counselor 2
</div>
<div
class="cursor-pointer px-4 py-2 hover:bg-green-400"
data-value="counselor3"
>
Counselor 3
</div>
<div
class="cursor-pointer px-4 py-2 hover:bg-green-400"
data-value="counselor4"
>
Counselor 4
</div>
</div>
</div>
<!-- Counselor toggle end -->
</div>
<div class="pick-paragraph mx-5 my-2">
<p class="text-base text-green-800">
Pick a date and time for an appointment.
</p>
</div>
<div class="month-button-container mx-5 my-3 flex justify-between">
<div class="my-auto text-green-800">
<h1 id="month-year" class="text-2xl font-semibold"></h1>
</div>
<div class="month-button-wrapper flex text-2xl text-white">
<div
class="less-than-button my-auto cursor-pointer rounded px-5 py-2"
id="prev"
>
<h1><</h1>
</div>
<div
class="greater-than-button my-auto ml-2 cursor-pointer rounded px-5 py-2"
id="next"
>
<h1>></h1>
</div>
</div>
</div>
<div class="bg-berde grid grid-cols-7 text-white">
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Sun
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Mon
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Tue
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Wed
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Thu
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Fri
</div>
<div class="mx-auto px-7 py-3 text-center text-lg font-semibold">
Sat
</div>
</div>
<div
class="my-2 grid cursor-pointer grid-cols-7 text-center text-xl font-semibold"
id="days"
></div>
</div>
</div>
</section>
<!-- Calendar Section End -->
And here is the code block that doesn’t work:
<div
id="counselor-lists"
class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white"
>
<div class="my-auto">
<h1 id="selected-counselor">Counselor 1</h1>
</div>
<div class="text-lg">
<p>∨</p>
</div>
</div>
This code works in other files, but not in this one. Why does justify-between not work in this file?
1
The code block you pointed out actually works, and the issue isn’t with justify-between. The reason it didn’t expand in width is that it’s indirectly within a flex container. When inside a flex container, if you don’t add flex-grow to the child elements, they will shrink to the content size. So the solution is quite simple: in Tailwind, you just need to add grow to the child element.
<script src="https://cdn.tailwindcss.com"></script>
<div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10">
<div class="appointment-counselor-container mx-5 flex justify-between">
<div class="text-2xl font-semibold text-green-700">
<h1>Appointments</h1>
</div>
<!-- Counselor toggle -->
<div class="relative select-none grow">
<!-- This section now works because the parent container adds `grow` -->
<div id="counselor-lists" class="bg-berde flex w-full cursor-pointer items-center justify-between rounded px-10 py-1 text-white">
<div class="my-auto">
<h1 id="selected-counselor">Counselor 1</h1>
</div>
<div class="text-lg">
<p>∨</p>
</div>
</div>
<!-- Counselor toggle end -->
</div>
</div>
</div>Here’s an example that better fits your design:
<script src="https://cdn.tailwindcss.com"></script>
<div class="calendar-container mx-10 my-5 rounded-md border border-black bg-green-400 py-10">
<div class="appointment-counselor-container mx-5 flex gap-4">
<div class="text-2xl font-semibold text-green-700">
<h1>Appointments</h1>
</div>
<!-- Counselor toggle -->
<div class="relative grow select-none">
<!-- This section now works because the parent container adds `grow` -->
<div id="counselor-lists" class="bg-berde ml-auto flex max-w-64 cursor-pointer items-center justify-between rounded bg-green-700 px-4 py-1 text-white">
<div class="my-auto">
<h1 id="selected-counselor">Counselor 1</h1>
</div>
<div class="text-lg">
<p>∨</p>
</div>
</div>
<!-- Counselor toggle end -->
</div>
</div>
</div>Demo on Tailwind Play.
1