useTailwindShorthandClasses

HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.9
• Diagnostic Category: lint/nursery/useTailwindShorthandClasses
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • tailwind
• Sources:
  • Inspired from better-tailwindcss/enforce-shorthand-classes

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useTailwindShorthandClasses": "error"
      }
    }
  }
}

Description

Enforce using fewer Tailwind utilities instead of multiple utilities that are functionally the same.

This rule detects sequences of Tailwind CSS utility classes that can be replaced by a single shorter utility. Using shorthands reduces duplication, keeps class lists readable, and helps prevent drift where one side gets updated but the matching side does not.

Examples

Invalid

<div class="w-4 h-4"></div>

code-block.html:1:13 lint/nursery/useTailwindShorthandClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ These Tailwind classes can be replaced with a shorthand class.
  
  > 1 │ <div class=“w-4 h-4”></div>
      │             ^^^
    2 │ 
  
  ℹ Compressible utility used here.
  
  > 1 │ <div class=“w-4 h-4”></div>
      │                 ^^^
    2 │ 
  
  ℹ Using fewer classes reduces duplication and improves readability.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/11342 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use the Tailwind shorthand classes.
  
    1   │ - <div·class=“w-4·h-4”></div>
      1 │ + <div·class=“size-4”></div>
    2 2 │   
  

Valid

<div class="size-4"></div>

Known limitations

This rule currently doesn’t check bare strings inside framework-specific class collections, such as array or object entries in Vue, Svelte, or Astro class bindings:

<div class={["w-4 h-4", selected && "px-2 py-2"]}></div>
<div class={{ "mr-3 ml-3": active }}></div>

It also doesn’t check untagged template chunks inside framework class attributes:

<div class={`border-x border-y ${extra}`}></div>

In Astro, bare strings inside class:list arrays are currently not checked unless they are passed to a recognized helper function such as clsx.

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases

JSX and TSX

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.9
• Diagnostic Category: lint/nursery/useTailwindShorthandClasses
• This rule has an unsafe fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • tailwind
• Sources:
  • Inspired from better-tailwindcss/enforce-shorthand-classes

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "useTailwindShorthandClasses": "error"
      }
    }
  }
}

Description

Enforce using fewer Tailwind utilities instead of multiple utilities that are functionally the same.

This rule detects sequences of Tailwind CSS utility classes that can be replaced by a single shorter utility. Using shorthands reduces duplication, keeps class lists readable, and helps prevent drift where one side gets updated but the matching side does not.

Examples

Invalid

<div className="w-4 h-4" />;

code-block.jsx:1:17 lint/nursery/useTailwindShorthandClasses  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ These Tailwind classes can be replaced with a shorthand class.
  
  > 1 │ <div className=“w-4 h-4” />;
      │                 ^^^
    2 │ 
  
  ℹ Compressible utility used here.
  
  > 1 │ <div className=“w-4 h-4” />;
      │                     ^^^
    2 │ 
  
  ℹ Using fewer classes reduces duplication and improves readability.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/11342 for more information or to report possible bugs.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Use the Tailwind shorthand classes.
  
    1   │ - <div·className=“w-4·h-4”·/>;
      1 │ + <div·className=“size-4”·/>;
    2 2 │   
  

Valid

<div className="size-4" />;

Where Tailwind is Recognized

The rule checks string arguments and tagged template literals passed to known helper functions. This is useful for libraries like clsx, cva, or CSS-in-JS helpers such as tw.

The full list of helper functions is:

• clsx
• tw
• twMerge
• twJoin
• cva
• tv
• cn
• cc
• cnb
• ctl

Tagged template members like tw.div are also checked when their base function name is recognized.

Known limitations

This rule currently doesn’t check bare strings inside framework-specific class collections, such as array or object entries in Vue, Svelte, or Astro class bindings:

<div class={["w-4 h-4", selected && "px-2 py-2"]}></div>
<div class={{ "mr-3 ml-3": active }}></div>

It also doesn’t check untagged template chunks inside framework class attributes:

<div class={`border-x border-y ${extra}`}></div>

In Astro, bare strings inside class:list arrays are currently not checked unless they are passed to a recognized helper function such as clsx.

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases