Consistency

no-conflicting-classes

Detect contradictory Tailwind classes on the same element.

Catches contradictory utilities applied to the same element — flex hidden, text-left text-center — that silently cancel each other out. Conflict is rarely intentional; it is the residue of an agent rewriting a className without removing the previous version.

Behavior

• Fixable: No.
• Suggestions: No.

Options

["warn", {
  "customConflicts": [["my-class-a", "my-class-b"]]
}]

Examples

Bad:

<div className="flex hidden" />
<p className="text-left text-center" />

Good:

<div className="flex items-center gap-4" />
<div className="flex sm:hidden" />

Related rules

• no-duplicate-class-stringsFlag identical className strings repeated 3+ times in a file.
• max-tailwind-classesFlag elements with too many Tailwind utility classes.
• no-inline-stylesDisallow inline style attributes; use Tailwind utility classes.

Use it

Enable no-conflicting-classes in your eslint.config.js:

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

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

Found a false positive? Report it on GitHub →

← Back to all rules