Consistency

max-tailwind-classes

Flag elements with too many Tailwind utility classes.

Caps the number of utility classes per element. Long class strings are unreadable in review and almost always indicate the element should be extracted into a primitive. AI agents add classes; nobody removes them.

Behavior

• Fixable: No.
• Suggestions: No.

Options

["warn", {
  "max": 15
}]

Examples

Bad:

<div className="flex items-center justify-between gap-4 p-4 m-2 rounded-lg border bg-white text-gray-900 shadow-sm hover:shadow-md transition-all w-full h-auto min-h-screen" />

Good:

<Card className="flex items-center justify-between gap-4">
  <CardContent>...</CardContent>
</Card>

Related rules

• no-duplicate-class-stringsFlag identical className strings repeated 3+ times in a file.
• max-component-linesFlag single-file components exceeding a configurable line count.
• no-conflicting-classesDetect contradictory Tailwind classes on the same element.

Use it

Enable max-tailwind-classes in your eslint.config.js:

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

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

Found a false positive? Report it on GitHub →

← Back to all rules