Rules Reference
Deslint ships with 34 rules across 7 scoring categories. Each rule can be set to "error", "warn", or "off". Rules marked fixable auto-fix when you run eslint --fix.
Deep dive: for the full story on why arbitrary Tailwind values drift — the three archetypes, how AI coding agents amplify them, and how deslint catches each — read The hidden cost of Tailwind arbitrary values.
Colors
- Disallow arbitrary color values like bg-[#FF0000] in Tailwind classes.
no-arbitrary-colors/docs/rules/no-arbitrary-colors → - Flag text/background color combinations below WCAG AA contrast.
a11y-color-contrast/docs/rules/a11y-color-contrast → - Require a dark: variant for every background color class.
dark-mode-coverage/docs/rules/dark-mode-coverage → - Cap the number of unique color families used in a single file.
consistent-color-palette/docs/rules/consistent-color-palette →
Spacing
Typography
Responsive
- Require responsive breakpoints on fixed-width layout containers.
responsive-required/docs/rules/responsive-required → - Flag interactive elements smaller than 24×24 px.
touch-target-size/docs/rules/touch-target-size → - Block outline-none unless a replacement focus indicator is present.
focus-visible-style/docs/rules/focus-visible-style →
Accessibility
- Require meaningful alt text on every <img> element.
image-alt-text/docs/rules/image-alt-text → - Every form input must have an associated label.
form-labels/docs/rules/form-labels → - Require autocomplete on identity and payment form fields.
autocomplete-attribute/docs/rules/autocomplete-attribute → - Forbid invalid ARIA roles and unknown aria-* attributes.
aria-validation/docs/rules/aria-validation → - Forbid empty anchors and generic "click here" link text.
link-text/docs/rules/link-text → - Require a valid lang attribute on the <html> element.
lang-attribute/docs/rules/lang-attribute → - Forbid disabling user scaling on the viewport meta tag.
viewport-meta/docs/rules/viewport-meta → - Prefer semantic HTML over <div onClick> and redundant ARIA roles.
prefer-semantic-html/docs/rules/prefer-semantic-html →
Consistency
- Detect inconsistent spacing patterns across similar components.
consistent-component-spacing/docs/rules/consistent-component-spacing → - Disallow arbitrary border-radius values; use the radius scale.
no-arbitrary-border-radius/docs/rules/no-arbitrary-border-radius → - Detect inconsistent border-radius across similar components.
consistent-border-radius/docs/rules/consistent-border-radius → - Flag single-file components exceeding a configurable line count.
max-component-lines/docs/rules/max-component-lines → - Detect form elements missing error, disabled, or required handling.
missing-states/docs/rules/missing-states → - Disallow arbitrary z-index values like z-[999].
no-arbitrary-zindex/docs/rules/no-arbitrary-zindex → - Disallow inline style attributes; use Tailwind utility classes.
no-inline-styles/docs/rules/no-inline-styles → - Detect contradictory Tailwind classes on the same element.
no-conflicting-classes/docs/rules/no-conflicting-classes → - Flag identical className strings repeated 3+ times in a file.
no-duplicate-class-strings/docs/rules/no-duplicate-class-strings → - Flag elements with too many Tailwind utility classes.
max-tailwind-classes/docs/rules/max-tailwind-classes →
Motion & Animation
- Require animations to respect prefers-reduced-motion.
prefers-reduced-motion/docs/rules/prefers-reduced-motion → - Require icons to carry an accessible name or be marked decorative.
icon-accessibility/docs/rules/icon-accessibility → - Detect modals and drawers that don't establish a focus trap.
focus-trap-patterns/docs/rules/focus-trap-patterns → - Flag <img> elements missing loading, width/height, or srcset.
responsive-image-optimization/docs/rules/responsive-image-optimization → - Detect stacks that mix spacing tokens from different sub-scales.
spacing-rhythm-consistency/docs/rules/spacing-rhythm-consistency →
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.