useTailwindShorthandClasses (HTML)

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

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

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.