Spacing

no-magic-numbers-layout

Disallow arbitrary values inside grid and flex layout classes.

Targets the layout-specific arbitrary values — gap-[16px], grid-cols-[200px_1fr] — that bypass the spacing token system. Layout drift is harder to spot than colour drift because the diff still renders correctly; it only breaks at the second breakpoint.

Behavior

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

Examples

Bad:

<div className="grid gap-[16px] grid-cols-[200px_1fr]" />

Good:

<div className="grid gap-4 grid-cols-[200px_1fr]" />

Related rules

• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• consistent-component-spacingDetect inconsistent spacing patterns across similar components.
• no-arbitrary-zindexDisallow arbitrary z-index values like z-[999].

Use it

Enable no-magic-numbers-layout in your eslint.config.js:

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

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-magic-numbers-layout': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules