Spacing

no-arbitrary-spacing

Disallow arbitrary spacing values like p-[13px] in Tailwind classes.

Flags arbitrary padding, margin, and gap values in Tailwind utility classes and pushes the codebase back onto the spacing scale. The "shadow scale" of 13px, 17px, 22px values that AI agents accumulate between Tuesday and the rebrand.

Behavior

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

Options

["error", {
  "allowlist": ["24px"],
  "customScale": { "18": 18 }
}]

Examples

Bad:

<div className="p-[13px] mt-[7px]" />

Good:

<div className="p-3 mt-2" />

Related rules

• no-magic-numbers-layoutDisallow arbitrary values inside grid and flex layout classes.
• consistent-component-spacingDetect inconsistent spacing patterns across similar components.
• spacing-rhythm-consistencyDetect stacks that mix spacing tokens from different sub-scales.

Use it

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

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

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

Found a false positive? Report it on GitHub →

← Back to all rules