Responsive

responsive-required

Require responsive breakpoints on fixed-width layout containers.

Detects fixed-width layout containers that lack responsive variants and would overflow on mobile. The single biggest source of "AI shipped a desktop-only layout" regressions.

Behavior

• Fixable: No.
• Suggestions: No.

Options

["warn", {
  "requiredBreakpoints": ["sm", "md"],
  "iconSizeThreshold": 48,
  "ignoredPrefixes": ["max-w-"]
}]

Examples

Bad:

<div className="w-[800px]" />

Good:

<div className="w-full md:w-[800px]" />

Related rules

• touch-target-sizeFlag interactive elements smaller than 24×24 px.
• responsive-image-optimizationFlag <img> elements missing loading, width/height, or srcset.
• viewport-metaForbid disabling user scaling on the viewport meta tag.

Use it

Enable responsive-required in your eslint.config.js:

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

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/responsive-required': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules