useTailwindShorthandClasses (JavaScript)

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

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useTailwindShorthandClasses": "error"
6
      }
7
    }
8
  }
9
}

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

1
<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

1
<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:

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

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

1
<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.