Tailwind CSS horizontal scrolling when content overflows - tailwind-css

Using Tailwind CSS, I want to apply the scrolling effect when the content is too large to fit the screen width. I have a div container that holds the child elements, which I want to scroll. When I use a section to hold the image and the username (shown below), they all shrink to fit the screen size. This is not what I want. I want only a few sections to appear and the rest when I scroll. What am I missing?
Not working
<div class="flex overflow-x-auto space-x-8">
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
<span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
<span>John</span>
</section>
<section class="h-13 w-13 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="h-13 w-13 rounded-full border-2 border-purple-300" alt=""></span>
<span>John</span>
</section>
</div>
If I put it like below, it's working, but I do not want it this way.
<div class="flex overflow-x-auto space-x-5">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
<img src="download.jfif" class="h-10 w-10 rounded-full" alt="Bhutan">
</div>


First, 13 is not a valid value for height/width. (https://tailwindcss.com/docs/height) That likely causes some of your issues.
You can put flex-shrink-0 on all the section elements to prevent the images from shrinking instead of scrolling.
But as you've defined the fixed width of the section to be the same as the image, you will also get vertical scrolling.
Check out the following example:
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex overflow-x-auto space-x-8 w-1/2 bg-red-200">
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
<section class="flex-shrink-0 rounded-full border-2 border-purple-300">
<span><img src="download.jfif" class="bg-purple-200 h-14 w-14 rounded-full border-2 border-purple-300" alt=""
/></span>
<span>John</span>
</section>
</div>
https://play.tailwindcss.com/4B5d6ne1s5

Related

Popping Out of Hidden Overflow

I have items that are listed in a container with overflow-y-scroll and each item has a tooltip that needs to be displayed to the right of the list item but outside of the container.
I followed this article and managed to implement something similar with Tailwind. See Tailwind Play. The problem is that the tooltips positions are incorrect after scrolling. (I assume it's because the list item is static)
How can I make the tooltip move with the list item as it scrolls? Is there a better way to do this?
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex h-screen items-center justify-center">
<div class="relative">
<ul class="h-24 w-24 space-y-3 overflow-y-auto overflow-x-hidden rounded-md border bg-gray-100 py-2 px-4">
<li class="group static cursor-pointer">
Item 1
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 1</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 2
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 2</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 3
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 3</p>
</div>
</li>
<li class="group static cursor-pointer">
Item 4
<div class="invisible absolute z-10 group-hover:visible">
<p class="ml-14 -mt-6 w-20 rounded-lg bg-blue-500 px-2 py-1 text-sm text-white shadow">Tooltip 4</p>
</div>
</li>
</ul>
</div>
</div>

how to put the content in the vertical center in tailwind

I am using tailwind to make a component as below
how to make the button in the vertical middle / center instead of positioning on the top.
<div class="flex flex-grow mb-4">
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
<div class="w-96 border-gray-400 flex flex-row">
<div class="transition duration-500 shadow ease-in-out transform hover:-translate-y-1 hover:shadow-sm select-none cursor-pointer bg-white dark:bg-gray-800 rounded-md flex flex-1 items-center p-4 hover:border hover:border-blue-400">
<div class="flex flex-col w-10 h-10 justify-center items-center mr-4">
<a href="#" class="block relative">
<img alt="profil" src="https://www.tailwind-kit.com/images/person/6.jpg" class="mx-auto object-cover rounded-full h-10 w-10 "/>
</a>
</div>
<div class="flex-1 pl-1 ">
<div class="font-medium dark:text-white">
jake li
</div>
<div class="text-gray-600 dark:text-gray-200 text-sm">
2022.1.11
</div>
</div>
<div class="text-gray-600 dark:text-gray-200 text-xs">
</div>
<button class="w-12 text-right flex justify-end opacity-0 hover:opacity-100">
</button>
</div>
</div>

A little out of context, so here's a quick change for the button.
From:
<div class="w-12">
<i class=" cursor-pointer el-icon-back text-white mr-2 bg-blue-600 rounded-full p-2 mr-2" ></i>
</div>
To:
<div class="w-12 self-center text-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
Or:
<div class="w-12 flex items-center justify-center">
<i class=" cursor-pointer el-icon-back text-white bg-blue-600 rounded-full p-2" >←</i>
</div>
You can test at https://play.tailwindcss.com and see if that's what you're looking for.
There are other details but for now that seems enough for the current question.

CSS Grid items not aligned as one row in Django template with tailwind-css

I am new to Django and ran into this issue.
so basically I am making an app where I have to display rooms on the main home page.
The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)
def home(request):
return render(request, 'base/index.html', {'rooms':rooms})
then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling
{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
{% endfor %}
I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)
In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.
How to fix this and make 3-4 dynamically generated grid items to be in one row?

I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
.
.
.
</div>
<!-- call ends here -->
</div>
Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>

Maybe the problem with the position where you put loop, change your code like this to make loop work inside the grid
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
{% endfor %}
</div>

How can I compose tailwind classes into more higher-level, semantic classes?

With Tailwind, I can do something like this:
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-white" src="...src..." alt="">
But that type of markup has lots of problems for me. I'd much rather do something like this, a "fake" way using sass mixins of composing disparate UI styles into a larger level emantic class:
.user-avatar {
#include inline-block;
#include h-6;
#include w-6;
#include rounded-full;
#include ring-2;
#include ring-white;
}
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
<img class="user-avatar" src="...src..." alt="">
Is anything like this possible in Tailwind?

Ah, just saw the #apply directive. That must be the thing.

In your index.css you can extract classes with #apply. You can red up in the docs about advantages and disadvantages.
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer components {
.user-avatar {
#apply inline-block h-6 w-6 rounded-full ring-2 ring-white;
}
}
<img class="user-avatar" src="...src..." alt="">

Menu hidden by DIV Tailwind

I do not understand what I am doing wrong (Im a backend guy though). Using Tailwind on VueJS, This menu wont appear above the DIV. I have tried z-index and everything but nothing will make it appear. When I try and force the menu to the front of the screen it wont appear. I have no idea what I am doing wrong.
Image Attached of issue
<section class="bg-white dark:bg-gray-800 min-w-0 flex-1 h-auto flex flex-col lg:order-last">
<div>
<ul class="divide-y divide-gray-200">
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
<li class="bg-green-400 bg-opacity-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-green-400 bg-opacity-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Leslie Alexander</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-white py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p>
</div>
</div>
</div>
</li>
<li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col overflow-hidden lg:order-last">
<div>
<span class="pl-10 pt-2 relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-3 py-1 rounded-l-md border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> YouTube </button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
</svg>
</button>
<div class="relative inline-block text-left">
<div>
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-900 dark:border-gray-800 dark:hover:bg-gray-600 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" aria-expanded="true" aria-controls="headlessui-menu-items-2"> Send Option
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 ml-2 h-5 w-5">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-2" role="menu" tabindex="0" class="overflow-visible origin-top-right absolute bottom-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none">
<div class="py-1" role="none">
Account settings
Support
License
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" id="headlessui-menu-item-44" role="menuitem" tabindex="-1"> Sign out </button>
</form>
</div>
</div>
</div>
</span>
<div class="pr-10 pl-10 pb-5 h-full mt-1 flex rounded-md shadow-sm">
<div class="relative flex items-stretch flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<input type="text" name="email" id="email" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="Type your message...">
</div>
<button id="switchTheme" class="-ml-px bg-indigo-700 relative inline-flex items-center space-x-2 px-4 py-1 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-gray-50">Send</span>
</button>
</div>
</div>
</section>

The footer <section> tag has overflow-hidden set, which cuts off any elements that extend out of the border of the <section>. Since your menu should extend out the top of the <section>, this isn't what you want. Removing this utility appears to fix the issue.
When debugging designs with lots of these Tailwind classes all over the place, it can be helpful to look at things in your browser DevTools to avoid being overwhelmed or missing things.
z-index can be tricky to work with, especially since it's commonly misunderstood. A lot of the time, you shouldn't need to use z-index, so seeing if other strategies work could reduce complexity and make your sites more resilient. For more information on z-index, check out Josh W. Comeau's excellent blog post.

Resources