How do I constrain the permitted z-index values?

[agusterodin]

In Tailwind v3, classnames that were not in my provided z-index scale (eg: z-59) were not generated. Obviously, arbitrary values in square braces (eg: z-[59]) worked. In Tailwind v4, any z-index is allowed and generated despite not being in my scale. How do I fix this?

zIndex: {
      0: '0',
      10: '1000',
      20: '2000',
      30: '3000',
      40: '4000',
      50: '5000',
      60: '6000',
      70: '7000',
      80: '8000', // Reserved for overlays that we want positioned underneath the navbar
      90: '9000', // Reserved for the navbar or anything that we want directly at the same level as the navbar
      100: '10000' // Reserved for overlays that cover the navbar
    }

I experienced the same thing with spacing but ended up being able to constrain allowed spacing values by adding spacing: defaultTheme.spacing to my TypeScript configuration file theme.

[philipp-spiess]

Hey @agusterodin! Unfortunately the answer is that there's no way to do this right now in v4 since you can not overwrite the core z-* utility and it does not use a namespace lookup. You can, however, add named --z-index-* values to your CSS theme and then ensure you only ever use those instead of numerical values!

[rozsazoltan]

Yeah, it's easy:

@theme inline {
  --z-index-90: 9000;
}

Generated CSS will be:

.z-90 {
  z-index: 9000;
}

Note: @theme inline is better, since in @theme it would assign the value 9000 to a global variable, one could say unnecessarily.

Related: https://gist.github.com/philipp-spiess/83101e0d0fce4d70fa080dbf31560894

[rozsazoltan]

Btw, similar to disabling default namespaces, deleting the default utility behavior could perhaps work in a similar way.

@import "tailwindcss";

/* WARNING: This is just brainstorming, not working code in v4.1.13 */
@theme {
  --z-index-*: initial;     /* like this */
  --z-index-0: 0;
  --z-index-10: 1000;
  /* ... */
  --z-index-100: 10000;
}

@utility z-* {
  z-index: --value(--z-index-*);
}

Of course, I know the default values are not related to the --z-index namespace, since it accepts any integer, so this is really just a very basic idea.