Tailwind V4, how to add custom z-index theming?

[wesleyjanse]

Hey all,

I'm struggling to get custom z-index theme values to work. I want to maintain a given structure in theming.

@theme {
  --z-index-negative: '-1';
  --z-index-base: '1';
  --z-index-base-overwrite: '10';
  --z-index-header: '50';
  --z-index-backdrop: '100';
  --z-index-drawer: '150';
  --z-index-popover: '200';
  --z-index-dropdown: '250';
  --z-index-tooltip: '300';
  --z-index-toast: '350';
  --z-index-progress-bar: '400';
}

but whenever I use a classname ".z-header" for example, no styles are applied.

[wesleyjanse]

So the issue was related to the quotes around the value...
So the correct and working structure is as follows:

@theme {
  --z-index-negative: -1;
  --z-index-base: 1;
  --z-index-base-overwrite: 10;
  --z-index-header: 50;
  --z-index-backdrop: 100;
  --z-index-drawer: 150;
  --z-index-popover: 200;
  --z-index-dropdown: 250;
  --z-index-tooltip: 300;
  --z-index-toast: 350;
  --z-index-progress-bar: 400;
}