drop-shadow --tw-filter from drop-shadow seems to be causing issues with z-index

[timmeade]

"tailwindcss": "^2.2.4",
NextJS 11.+

We have created a next.js app and have a hamburger slider style menu. Issue is that when slider snaps over anything with drop-shadow-?? appears above the slider. If we uncheck --tw-filter or change the css style to just shadow it works fine.

<div className="flex items-center w-full inline-flex justify-center py-1 px-4 border border-gray-300 rounded-2xl drop-shadow bg-white text-sm text-gray-500 focus:bg-white sm:focus:bg-purple-300 hover:bg-purple-300 hover:cursor-pointer">Whatever</div>

Any ideas? I thought i saw and absolute placement one time but currently do not see it.

[NovusOpus]

The code you provide don't really help for trying to get to the problem, but from the code of your example there's a conflict when you use flex with inline-flex, It should give you a warning if you're working with Tailwind CSS IntelliSense.

[jalyna]

I have a similar issue, when I have multiple elements with drop shadows beneath each other and an absolute element within the first drop shadow box.

I created the example here: https://play.tailwindcss.com/MOKMGLU14A
(I want to see "Absolute" instead of "Hello")

In my real world use cases I have 2 static boxes beneath each other, that have a drop shadow and within these boxes I have a dropdown menu. As I figured out is that filter creates a new stacking context. Has anyone found a workaround to this issue?

[rshekhtm]

I ran into the exact same issue as Jalyna. Did not find any clean workarounds, so ended up replacing all instances of drop-shadow with regular shadow, which doesn't use a filter. Probably overkill, but it was a PITA to figure out that it was shadows causing issues for absolutely-positioned dropdowns.

[MShahryiar]

Or you could limit the drop-shadow on bigger screens only. I encountered the same issue and I kind of fixed it by using drop shadow only on bigger screens.

[siarhei-klimuts]

I have the same issue. In my case, I added a custom class drop-shadow-glow to highlight available items. But it breaks z-index, so dropdowns from these items hide behind other items with drop-shadow-glow. I have not found a solution yet.

[DOQV]

Same issue :(

[rowanfuchs]

I've encountered the same issue within a full application where a drop shadow was used on the header and other elements, my workaround has been using the Vue.js teleport functionality to make sure the modal or aside was rendered above the drop shadow. I haven't been able to recreate a reproduceable stack.