I'm using Tailwind CSS and I want to show the white dropdown over the modal.
I tried using z-index but I can't make it work.
Any ideas?
This is my modal code:
<TransitionRoot as="template" :show="isOpen">
<Dialog as="div" class="inset-0 fixed overflow-y-auto">
<div class="flex min-h-screen text-center px-4 pt-4 pb-20 items-end justify-center sm:p-0 sm:block">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<DialogOverlay class="bg-gray-975 bg-opacity-85 inset-0 transition-opacity fixed" />
</TransitionChild>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:h-screen sm:inline-block sm:align-middle" aria-hidden="true"></span>
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200" leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<div class="rounded-lg shadow-xl text-left transform transition-all text-gray-850 inline-block align-bottom overflow-hidden sm:max-w-lg sm:my-8 sm:w-full sm:align-middle dark:text-gray-200">
...
</div>
</TransitionChild>
</div>
</Dialog>
And this is my dropdown code:
<Listbox v-model="selectedPerson">
<div class="mt-1 relative z-50">
<ListboxButton
class="bg-white rounded-lg cursor-default shadow-md text-left w-full py-2 pr-10 pl-3 relative sm:text-sm focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-white focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2">
<span class="block truncate">{{ selectedPerson.name }}</span>
<span class="flex pr-2 inset-y-0 right-0 absolute items-center pointer-events-none">
<SelectorIcon class="h-5 text-gray-400 w-5" aria-hidden="true" />
</span>
</ListboxButton>
...
</div>
Remove class overflow-hidden from <div class="rounded-lg shadow-xl text-left transform transition-all text-gray-850 inline-block align-bottom overflow-hidden sm:max-w-lg sm:my-8 sm:w-full sm:align-middle dark:text-gray-200">.
codesandbox
Change the class that sets the position of the child element from absolute to fixed
Related
The goal is to hide an element behind a parent. There is a relative parent position, and a fixed child position, so when you scroll down, the fixed child will become visible and the parent will go up.
The image with yellow border shall go behind
Here's what I've tried:
<!-- hamburger menu -->
<div class="relative bg-white z-50 border-2 border-purple-900 w-[34%] h-auto flex justify-end items-center">
<div class="fixed top-6 right-1 z-20 border-2 border-yellow-500">
<a class="lg:hidden inline-block float-right text-red-600 mr-[3px] mt-1 p-[6px] bg-white rounded-full border-2 border-yagya-red" href="#">
<button id="mobile_menu1" class="relative outline-none w-7 h-7">
<div role="hidden" id="line" class="inset-0 w-4 h-0.5 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
<div role="hidden" id="line2" class="inset-0 w-4 h-0.5 mt-1 m-auto rounded-full bg-yagya-red transition duration-300"></div>
</button>
</a>
</div>
</div>
thank you!
To add a z-index you have to use class:
z-10 : To bring that element forward
-z-10 : To bring that element backward
You can take the below example
<script src="https://cdn.tailwindcss.com"></script>
<!-- red with positive z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
<!-- red with negative z-index -->
<div class="p-10">
<div class="w-24 h-24 bg-red-600 rounded-full -z-10 absolute"></div>
<div class="w-24 h-24 bg-blue-600 rounded-full mt-10"></div>
</div>
FInd more here
I am trying to add 2 h2 tags with text right in the vertical and horizontal center of a flowbite carousel, I cannot manage to get a good result.
My classes (for tesint):
"absolute top-500 left-500" do not even make a difference to the way the text shows over the image. It is strange.
Here is the carousel:
https://flowbite.com/docs/components/carousel/
This is the entire html:
<div id="default-carousel" class="relative" data-carousel="static">
<!-- Carousel wrapper -->
<div class="overflow-hidden relative h-56 rounded-lg md:h-96">
<!-- Item 1 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
<img src="/docs/images/carousel/carousel-1.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
<!-- Item 2 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full z-10" data-carousel-item="">
<img src="/docs/images/carousel/carousel-2.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
<!-- Item 3 -->
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform -translate-x-full z-10" data-carousel-item="">
<img src="/docs/images/carousel/carousel-3.svg" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
</div>
</div>
<!-- Slider indicators -->
<div class="flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2">
<button type="button" class="w-3 h-3 rounded-full bg-white dark:bg-gray-800" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
</div>
<!-- Slider controls -->
<button type="button" class="flex absolute top-0 left-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-prev="">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="flex absolute top-0 right-0 z-30 justify-center items-center px-4 h-full cursor-pointer group focus:outline-none" data-carousel-next="">
<span class="inline-flex justify-center items-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>
I tried this in the first slide vua the text get stuck to the top of the slide:
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="">
<div class="absolute top-500 left-500 px-4 py-2 opacity-100">
<h2 class="text-xl text-white font-bold text-center">Text 1 here</h3>
<h2 class="text-xl text-white font-bold text-center">Text 2 here</h3>
</div>
</div>
Any help would be appreciated please.
Thanks!
You can add the two h2 tags by replacing the absolute with relative for the div containing heading and adding top-1/2 to same div.
This is the code
<script src="https://cdn.tailwindcss.com"></script>
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="">
<div class="relative top-500 top-1/2 px-4 py-2 opacity-100 ">
<h2 class="text-xl text-white font-bold text-center ">Text 1 here</h3>
<h2 class="text-xl text-white font-bold text-center ">Text 2 here</h3>
</div>
</div>
Please see the full page view.
Ok got it, this seems to work perfectly, (it can be left as absolute):
<div class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0 z-20" data-carousel-item="">
<img src="https://placeimg.com/800/300/rabbit" class="block absolute top-1/2 left-1/2 w-full -translate-x-1/2 -translate-y-1/2" alt="...">
<span class="absolute top-1/2 left-1/2 text-2xl font-semibold text-white -translate-x-1/2 -translate-y-1/2 sm:text-3xl dark:text-gray-800">First Slide</span>
</div>
I have following sample, written in tailwind css:
https://play.tailwindcss.com/f9iOK1e0oM
I want to have my control buttons on the bottom if the grid containers, however, they have different content sizes for the blue "tag" boxes, so the grid gets increased in height by some containers. however, as I am working with grid, all boxes are getting this height then. this is ok. But my control buttons should be always on the bottom of the containers, so that "Enabled" and "Delete" should not be so far away from bottom for the second container.
How to achieve this?
You need to add flex flex-col to the li element. And grow to the first child div and grow-0 max-h-max to the second child div.
<li class="flex flex-col col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow">
<div class=" grow flex w-full flex-col items-start justify-between p-6">
<div class="flex w-full items-start justify-between space-x-3">
<h3 class="truncate text-sm font-medium text-gray-900">243rfh83294d-23r8fj2n48r-24fi43bf</h3>
<span class="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800"> running </span>
</div>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Interval: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap text-xs font-bold text-gray-500">Next run: <span class="font-normal">1234</span></p>
<p class="mt-1 whitespace-pre-wrap">
<span class="inline-block flex-shrink-0 rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-800">test 1</span>
</p>
</div>
<div>
<div class="-mt-px flex shrink-0 grow-0 divide-x divide-gray-200 max-h-max">
<div class="flex w-0 flex-1">
<button class="relative -mr-px inline-flex w-0 flex-1 items-center justify-center rounded-bl-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<span class="ml-3">Enabled</span>
</button>
</div>
<div class="-ml-px flex w-0 flex-1">
<button class="group relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 transition hover:text-red-500">
<span class="ml-3">Delete</span>
</button>
</div>
</div>
</div>
</li>
https://play.tailwindcss.com/ilTMM5glku
I have done this only for the second card, but you should do it for all cards. So that when the content changes, the button row will always stick to the bottom and keep the same height in all cards.
Hope this helps.
I am trying to use sample tailwindui.com components.
They have the animation part defined in the comments, but I am not able to make out how I should those in my code. I am using plain html/js and would prefer to not use any framework/lib for this.
Here I am trying to show/hide a modal dialog.
The animation doe for the background overlay is given as
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
I have no idea how to encode this information to the background overlay div.
<div id="myModal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
Here is what I have tried so far;
<style>
.modalEntry {animation:modal-in 1s;}
.modalExit {animation:modal-in 1s;}
#keyframes modal-in {
from {opacity-0;}
to {opacity-100;}
}
#keyframes modal-out {
from {opacity-100;}
to {opacity-0;}
}
</style>
<button class="border border-red-500" onclick="toggleModal()">Toggle modal</button>
<!-- This example requires Tailwind CSS v2.0+ -->
<div id="myModal" class="hidden fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!--
Background overlay, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed modalEntry inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
<!--
Modal panel, show/hide based on modal state.
Entering: "ease-out duration-300"
From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
To: "opacity-100 translate-y-0 sm:scale-100"
Leaving: "ease-in duration-200"
From: "opacity-100 translate-y-0 sm:scale-100"
To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-->
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Deactivate account</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to deactivate your account? All of your data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button onclick="toggleModal()" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">Deactivate</button>
<button onclick="toggleModal()" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">Cancel</button>
</div>
</div>
</div>
</div>
<script>
function toggleModal () {
document.getElementById("myModal").classList.toggle("hidden");
}
</script>
I have put the same in a codepen for the ease of testing.
https://codepen.io/rishavs/pen/BadMQaN?editors=1000
i`m using jquery on a legacy php project, perhaps you could get the idea from that.
First add an id to slide-over-title, and suggested animations.
<div class="fixed inset-0 overflow-hidden z-[2000] bg-gray-200 transform transition ease-in-out duration-500 sm:duration-700 translate-x-full" aria-labelledby="slide-over-title" id="slide-over-title" role="dialog" aria-modal="true">
then create simple "toggle" function to use anywhere
function toggleSlider() {
if($("#slide-over-title").hasClass("translate-x-full")) {
$("#slide-over-title").removeClass("translate-x-full");
$("#slide-over-title").addClass("translate-x-0");
} else {
$("#slide-over-title").addClass("translate-x-full");
$("#slide-over-title").removeClass("translate-x-0");
}
}
On the snippet i am using the tailwind cdn, but for production you should use the tailwind preprocesor or cli to generate an optimized css file
function toggleSlider() {
if($("#slide-over-title").hasClass("translate-x-full")) {
$("#slide-over-title").removeClass("translate-x-full");
$("#slide-over-title").addClass("translate-x-0");
} else {
$("#slide-over-title").addClass("translate-x-full");
$("#slide-over-title").removeClass("translate-x-0");
}
}
<button onclick="toggleSlider()">Toggle Slider</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<div class="fixed inset-0 overflow-hidden z-[2000] bg-gray-200 transform transition ease-in-out duration-500 sm:duration-700 translate-x-full" aria-labelledby="slide-over-title" id="slide-over-title" role="dialog" aria-modal="true">
<div class="absolute inset-0 overflow-hidden">
<div class="absolute inset-0" aria-hidden="true"></div>
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
<!--
Slide-over panel, show/hide based on slide-over state.
Entering: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-full"
To: "translate-x-0"
Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
From: "translate-x-0"
To: "translate-x-full"
-->
<div class="pointer-events-auto w-screen max-w-2xl">
<div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
<div class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900" id="slide-over-title">Panel title</h2>
<div class="ml-3 flex h-7 items-center">
<button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" onclick="toggleSlider()">
<span class="sr-only">Close panel</span>
<!-- Heroicon name: outline/x -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<div class="relative mt-6 flex-1 px-4 sm:px-6">
<!-- Replace with your content -->
<div class="absolute inset-0 px-4 sm:px-6">
<div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true"></div>
</div>
<!-- /End replace -->
</div>
</div>
</div>
</div>
</div>
</div>
The easiest way to apply the transition effects without using Vue/React on tailwindui is to use Alpine.js, as explained in the docs:
<div
x-show="isOpen"
x-transition:enter="transition ease-out duration-100 transform"
x-transition:enter-start="opacity-0 scale-95"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-75 transform"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-95"
class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg"
>
If you want to write it by yourself, then you need to make sure that you first change the display (block/hidden) then you need to wait a frame before you apply the actual transition class. This is required, as changing the status from display:none to display:block does not trigger css transition animations (see Transitions on the CSS display property). Also you need to make sure that you hide your element after the transition has taken place (so ona duration-200 class, you would need to wait 200ms). Otherwise it would be hidden immediately without transition animation.
You could use "visibility" instead of "display", but that would not be a good option for the module, as the background goes over your entire page and makes other buttons unclickable.
To wait one frame before next repaint, you may use the window.requestAnimationFrame() method. Another possibility to implement it is using the setTimeout method, as done at https://stackoverflow.com/a/40447192
I actually found a github repository which implements only this x-transition from alpine with the aim to be used for tailwind-ui transitions https://github.com/CaptainCodeman/x-transition and its ~1kb gzipped, but alpine.js is ~7kb gzipped with a ton of other functionality, so I think it makes sense to go directly with alpine.js
In addition, when you implement it by your own, or use alpine.js, you still need to make sure that you meet the wai aria practices.
Im using tailwind css by the way. How can i auto <br> this text where it just goes to the next line after certain width
<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1">Large text that would normally need <br></span>
</div>
full thing
<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 text-sm">
<div class="block flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 block overflow-y overflow-x-hidden" style="display: block;">
resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</span>
</div>
</li>
</li>
</ul>
</div>
I believe what you're looking for is break-words. It will add line breaks after a certain length, even breaking words if needed.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="flex flex-col bg-white px-8 py-6 max-w-sm mx-auto rounded-lg shadow-md overflow-y-auto">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 text-sm">
<div class="flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 block overflow-y overflow-x-hidden break-words"> resume_back_end_developer.pdfskmaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </span>
</div>
</li>
</ul>
</div>
To not mess up other <span> elements, add a custom class to that specific span. In my sample I added the class br: <span class="ml-2 flex-1 br">
Next I add this for the css: .br { display: block; }. That will change the span with the class brto change from inline-element to a block level element. As such a linebreak behavior will happen by default.
.br {
display: block;
}
<div class="w-0 flex-1 flex items-center overflow-y-auto max-w-full">
<label class="font-thin font-semibold text-yellow-300">||</label>
<span class="ml-2 flex-1 br">Large text that would normally need <br></span>
</div>