Consistency

consistent-component-spacing

Detect inconsistent spacing patterns across similar components.

Compares spacing utilities applied to similar components (Cards, Buttons) within a file and surfaces the dominant pattern as the recommended standard. Catches the slow drift where Card A is p-4 and Card B is p-5 because two different agents wrote them on two different days.

Behavior

• Fixable: No.
• Suggestions: No.

Options

["warn", {
  "threshold": 2,
  "ignoreSizeVariants": true
}]

Examples

Bad:

<div className="p-4 rounded-lg">Card A</div>
<div className="p-5 rounded-lg">Card B</div>

Good:

<div className="p-4 rounded-lg">Card A</div>
<div className="p-4 rounded-lg">Card B</div>

Related rules

• no-arbitrary-spacingDisallow arbitrary spacing values like p-[13px] in Tailwind classes.
• consistent-border-radiusDetect inconsistent border-radius across similar components.
• spacing-rhythm-consistencyDetect stacks that mix spacing tokens from different sub-scales.

Use it

Enable consistent-component-spacing in your eslint.config.js:

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

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

Found a false positive? Report it on GitHub →

← Back to all rules