shadow outline issue in button group layout

[linusang]

Describe the problem:

the focus of a button in a button group using the focus:shadow-outline causes the outline to be blocked by "higher" elements

Link to a minimal reproduction:

any thoughts on how to tackle this?

[adamwathan]

You'll want to adjust the z-index of the item when it's focused as currently the button on the right is positioned higher in the z-index tree.

You can enable focus variants for z-index in the config here:

https://tailwindcss.com/docs/z-index#responsive-and-pseudo-class-variants

Here's a Tailwind Play demonstrating what you want:

https://play.tailwindcss.com/mTt8vwZrdI