Tailwindcss: Negative z-index

[tplaner]

Negative z-indexes have some valid use cases (such as an element uses as a background).

If you add a negative z-index to the config:

```
zIndex: {
'auto': 'auto',
'0': 0,
'-1': -1,
},
````

You'll end up with: .z--1.

I think double dashes are trying to be avoided since they break comments if you ever comment out the html code.

Should there be a separate negative z-index generator similar to negative margins?

[rathesDot]

I would add a key like negative ... Adding an extra generator is not necessary as you only need the z-index: -1 ...

So I would use

zIndex: {
  'auto': 'auto',
  'negative': -1,
  '0': 0,
}

[hacknug]

Also if for some reason you ever need more than one negative z-index, you could always do something like:

zIndex: {
  'auto': 'auto',
  'n2': -2,
  'n1': -1,
  '0': 0,
  '1': 1,
  '2': 2
}

[tplaner]

Thanks for the suggestions, closing.

[the94air]

Hi, @adamwathan. hmmm.....this is (kind of) an important class -z. Can we add that to tailwind? Since we already support negative margins, please? I know I can just put it in my configs but it will be useful if pulling from CDN.

[hacknug]

@the94air support for this was introduced in 2104a4e006620e4bacb5463f866132c1631d612a a while ago. Did you encounter any issues with it? If so, make sure you're using the latest version of Tailwind and not v0.x 👍

[the94air]

Hi @hacknug. It's working normally when compiled by adding a negative value to the tailwind config as the documentation stated. But my issue is with the CDN version. I am thinking of supporting z-index: -1 at least for the CDN version. There is no .-z class in the latest version. That was my issue. And am just trying to know if there is a chance to support this by default. Thanks for help.

[hacknug]

@the94air yeah, I also think it would we nice to have .-z-10 on the default config

[the94air]

That would be great!

[the94air]

Thanks anyways.