noDuplicateClasses

HTML

Note

This rule has been implemented but not released yet. It will be available in the next release.

Summary

• Diagnostic Category: assist/source/noDuplicateClasses
• Sources:
  • Inspired from better-tailwindcss/no-duplicate-classes

How to enable in your editor

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.noDuplicateClasses.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.noDuplicateClasses.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

Use the source action code source.action.noDuplicateClasses.biome

How to configure

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "noDuplicateClasses": "on"
      }
    }
  }
}

Description

Remove duplicate CSS classes.

Detects and removes duplicate CSS classes in HTML class attributes.

This action helps keep your class strings clean by detecting and removing duplicates.

Duplicate classes are redundant and can indicate copy-paste errors or merge conflicts.

Examples

<div class="flex flex"></div>

code-block.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class=“flex·flex”></div>
      │                 -----        

<div class="p-4 text-red-500 p-4 bg-white"></div>

code-block.html ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class=“p-4·text-red-500·p-4·bg-white”></div>
      │                              ----                

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases

JSX and TSX

Note

This rule has been implemented but not released yet. It will be available in the next release.

Summary

• Diagnostic Category: assist/source/noDuplicateClasses
• Sources:
  • Inspired from better-tailwindcss/no-duplicate-classes

How to enable in your editor

VS Code

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.action.noDuplicateClasses.biome": "explicit",
    "source.fixAll.biome": "explicit"
  }
}

Zed

.zed/settings.json

{
  "code_actions_on_format": {
    "source.action.noDuplicateClasses.biome": true,
    "source.fixAll.biome": true
  }
}

Other editors

Use the source action code source.action.noDuplicateClasses.biome

How to configure

biome.json

{
  "assist": {
    "actions": {
      "source": {
        "noDuplicateClasses": "on"
      }
    }
  }
}

Description

Remove duplicate CSS classes.

Detects and removes duplicate CSS classes in JSX class and className attributes, as well as in utility function calls like clsx, cn, cva, etc.

Duplicate classes are redundant and can indicate copy-paste errors or merge conflicts.

Examples

<div class="flex flex" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class=“flex·flex”·/>;
      │                 -----     

<div class="p-4 text-red-500 p-4 bg-white" />;

code-block.jsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Source action diff:
  
    1 │ <div·class=“p-4·text-red-500·p-4·bg-white”·/>;
      │                              ----             

Options

Use the attributes option to specify additional JSX attributes to check. Use the functions option to specify utility functions to check (e.g., clsx, cn, cva).

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases