Rules Reference

Deslint ships with 10 rules across five categories: colors, spacing, typography, responsive, and consistency. Each rule can be set to "error", "warn", or "off".

Colors

no-arbitrary-colors

Disallow arbitrary color values in Tailwind classes. Flags patterns like bg-[#FF0000] and suggests design tokens instead.

• Fixable: Yes (auto-fix replaces with nearest token)
• Suggestions: Yes

Options:

["error", {
  "allowlist": ["#1E3A5F"],
  "customTokens": { "brand-navy": "#1E3A5F" }
}]

Examples:

// Bad
<div className="bg-[#FF5733] text-[#333]" />

// Good
<div className="bg-red-500 text-gray-700" />

a11y-color-contrast

Flag text/background color combinations with insufficient WCAG AA contrast ratio. Requires a minimum 4.5:1 ratio for normal text and 3:1 for large text.

• Fixable: No
• Suggestions: Yes (suggests accessible alternatives)

Options:

["error", {
  "customColors": { "brand-navy": "#1E3A5F" }
}]

Examples:

// Bad — low contrast
<div className="bg-gray-100 text-gray-300" />

// Good — sufficient contrast
<div className="bg-gray-100 text-gray-900" />

dark-mode-coverage

Flag components with background color classes that lack corresponding dark: variants. Auto-fixes by adding the inverted shade.

• Fixable: Yes (adds dark: variant with inverted shade)
• Suggestions: Yes

Options:

["warn", {
  "ignoredPrefixes": ["bg-gradient"],
  "ignoredColors": ["bg-transparent"]
}]

Examples:

// Bad — no dark variant
<div className="bg-white" />

// Good — dark variant included
<div className="bg-white dark:bg-gray-900" />

// Auto-fix: bg-blue-100 → bg-blue-100 dark:bg-blue-900

Spacing

no-arbitrary-spacing

Disallow arbitrary spacing values in Tailwind classes. Flags patterns like p-[13px] and suggests the nearest scale value.

• Fixable: Yes (replaces with 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" />

Typography

no-arbitrary-typography

Disallow arbitrary typography values in Tailwind classes. Covers font-size, font-weight, line-height, and letter-spacing.

• Fixable: Yes (replaces with nearest scale value)
• Suggestions: Yes

Options:

["warn", {
  "allowlist": ["15px"],
  "customScale": {
    "fontSize": { "hero": "4rem" }
  }
}]

Examples:

// Bad
<p className="text-[15px] font-[450]" />

// Good
<p className="text-base font-medium" />

Responsive

responsive-required

Require responsive breakpoints on fixed-width layout containers to prevent broken mobile layouts. Flags elements with fixed widths that lack responsive variants.

• Fixable: No
• Suggestions: No

Options:

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

Examples:

// Bad — fixed width, no responsive
<div className="w-[800px]" />

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

Consistency

consistent-component-spacing

Detect inconsistent spacing patterns across similar components (e.g., Cards, Buttons). Reports the dominant spacing pattern as the suggested standard.

• Fixable: No
• Suggestions: No

Options:

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

max-component-lines

Flag single-file components exceeding a configurable line count. Large components should be decomposed for maintainability.

• Fixable: No
• Suggestions: No

Options:

["warn", {
  "maxLines": 300,
  "ignoreComments": false,
  "ignoreBlankLines": false
}]

missing-states

Detect form elements missing error, disabled, or required state handling. Ensures interactive elements handle edge cases properly.

• Fixable: No
• Suggestions: Yes

Options:

["error", {
  "requireDisabled": true,
  "requireAriaInvalid": true,
  "requireAriaRequired": true,
  "formElements": ["input", "select", "textarea", "button"]
}]

Examples:

// Bad — missing states
<input type="text" />

// Good — all states handled
<input type="text" disabled={isDisabled} aria-invalid={hasError} aria-required />

no-arbitrary-zindex

Disallow arbitrary z-index values like z-[999]. Use Tailwind scale values (z-0, z-10, z-20, z-30, z-40, z-50) instead.

• Fixable: Yes (replaces with nearest scale value)
• Suggestions: Yes

Options:

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

Examples:

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

// Good
<div className="z-50" />

// Auto-fix: z-[25] → z-20 (nearest scale value)

Inline Suppression

Suppress a single violation with deslint-ignore and a mandatory reason:

{/* deslint-ignore no-arbitrary-colors -- brand gradient requires exact hex */}
<div className="bg-[#1E3A5F]" />

Report a False Positive

If a rule flags code that you believe is correct, please report it so we can improve Deslint for everyone. Include the rule name, the flagged code, and why you think it's a false positive.

Report a false positive on GitHub →