Consistency

no-arbitrary-zindex

Disallow arbitrary z-index values like z-[999].

Forbids arbitrary z-index utilities and steers usage back onto the Tailwind scale (z-0, z-10, z-20, z-30, z-40, z-50). Stacking-context drift is one of the hardest-to-debug categories of design regression — keep the layer model declarative.

Behavior

• Fixable: Yes — replaces with the nearest scale value.
• Suggestions: Yes.

Options

["error", {
  "allowlist": [999, 9999]
}]

Examples

Bad:

<div className="z-[999]" />

Good:

<div className="z-50" />

Related rules

• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• focus-trap-patternsDetect modals and drawers that don't establish a focus trap.
• no-inline-stylesDisallow inline style attributes; use Tailwind utility classes.

Use it

Enable no-arbitrary-zindex in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-arbitrary-zindex': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules