Tabs component uses fixed z-index

[mike-plummer]

Tabs component buttons have z-20 class applied which can elevate the component above an overlay. Can this be restructured to rely on auto strategy for z-index?

Able to work around it in the app by applying these overrides - as a simple solution it looks like you can bump the z-index values from 10, 20, 30 to 1, 2, 3 to reduce the risk of overlap conflict

button[role="tab"] {
    z-index: 2;
}
div {
  &:first-of-type {
    z-index: 1;
  }
  &:last-of-type {
    z-index: 3;
  }
}

[elevatebart]

Thank you for pointing this out @mike-plummer

It does indeed look awkward.

CSS Methods that rely heavily on JavaScript and the Framework to work are prone to fail in the future. When we change framework for instance. So I try to avoid them to build tools supposed to be shared.

Therefore, I would prefer not to use anything that calculates the z-index from context.

There is a great workaround to your issue though, it relies on stacking context.
If you place the tabs in an element that has a low level stacking context, it will stay in that stacking context.

before

<div class="z-10">
content that gets hidden
</div>
<Tabs :tabs="tabs" />

after

<div class="z-10">
content that no more gets hidden
</div>
<div class="relative z-0"><!-- this line creates a stacking context whose content will always stay under z-10 -->
<Tabs :tabs="tabs" />
</div>

Also given the standard tailwind z-index values, 1, 2 and 3 would not be available.