Adding tailwind prose class seems to change behavioural z-index of lists about tailwindcss-typography HOT 3 CLOSED

I added prose to one of my pages and now <li> content appears above my menu dropdowns. It has something to do with this style:

.prose ul > li {
    position: relative;
}

When you add z-index: -1; to the above, the list items go back where they belong.

Screenshot of the issue

from tailwindcss-typography.

It feels like the lists approach is very problematic, if for instance you want to modify only one list inside a prose div, then you need to address different media queries and elements in order to override it

from tailwindcss-typography.

Hey! Thank you for your bug report!
Much appreciated! 🙏

When you have ul/li items in your prose, we add position: relative; so that we can position the small dots before each list item with position: absolute;. The position: relative will create a new "layer" therefore it now seems to be on top.

A possible fix for us could be adding a relative on the prose class itself. However this will result in the full prose block be on top of your navigation.

So what I would suggest is to add a z-10 to your navbar and it should be good to go. Here is an example: https://play.tailwindcss.com/OGofKqUFIM

from tailwindcss-typography.