noTailwindLegacyUtilities (JavaScript)

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/noTailwindLegacyUtilities
This rule has a safe fix.
The default severity of this rule is warning.
This rule belongs to the following domains:
- tailwind
Sources:
- Inspired from better-tailwindcss/no-deprecated-classes

How to configure

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

Description

Disallow Tailwind CSS utility classes that Tailwind CSS only keeps for backward compatibility.

Tailwind CSS renamed several utilities, but still accepts some of the old names so that existing projects keep working. This rule reports those old names and suggests the current ones. It checks the following classes, including their variants and negative values:

Legacy class	Replacement
`bg-gradient-to-*`	`bg-linear-to-*`
`bg-left-top`, `bg-right-top`, `bg-left-bottom`, `bg-right-bottom`	`bg-top-left`, `bg-top-right`, `bg-bottom-left`, `bg-bottom-right`
`object-left-top`, `object-right-top`, `object-left-bottom`, `object-right-bottom`	`object-top-left`, `object-top-right`, `object-bottom-left`, `object-bottom-right`
`max-w-screen-*`	`max-w-(--breakpoint-*)`
`overflow-ellipsis`	`text-ellipsis`
`decoration-slice`, `decoration-clone`	`box-decoration-slice`, `box-decoration-clone`
`flex-grow`, `flex-grow-*`	`grow`, `grow-*`
`flex-shrink`, `flex-shrink-*`	`shrink`, `shrink-*`
`order-none`	`order-0`
`break-words`	`wrap-break-word`
`start-*`	`inset-s-*`
`end-*`	`inset-e-*`

Some replacements were added after Tailwind CSS v4.0: bg-top-left, object-top-left, and wrap-break-word in v4.1, and inset-s-* and inset-e-* in v4.2. When the tailwindcss version range in the closest package.json allows a version that doesn’t have the replacement yet, this rule doesn’t report the legacy class. For example, "tailwindcss": "^4.1.0" can install v4.1, so start-4 isn’t reported.

This rule doesn’t read your Tailwind CSS theme. It only reports start-* and end-* classes whose values work without a theme, such as start-4, start-1/2, start-px, or start-[3px], and max-w-screen-* classes that use a default breakpoint (sm, md, lg, xl, or 2xl). This way, custom classes such as start-date aren’t reported.

Examples

Invalid

1
<div className="flex-grow" />;

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

  ⚠ The Tailwind CSS class flex-grow is a legacy name.
  
  > 1 │ <div className="flex-grow" />;
      │                 ^^^^^^^^^
    2 │ 
  
  ℹ Tailwind CSS renamed this utility and only keeps the old name for backward compatibility.
  
  ℹ Use grow instead.
  
  ℹ 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.
  
  ℹ Safe fix: Use the current class name.
  
    1 │ <div·className="flex-grow"·/>;
      │                 -----

1
<div className="hover:bg-gradient-to-r" />;

code-block.jsx:1:23 lint/nursery/noTailwindLegacyUtilities  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ The Tailwind CSS class bg-gradient-to-r is a legacy name.
  
  > 1 │ <div className="hover:bg-gradient-to-r" />;
      │                       ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Tailwind CSS renamed this utility and only keeps the old name for backward compatibility.
  
  ℹ Use bg-linear-to-r instead.
  
  ℹ 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.
  
  ℹ Safe fix: Use the current class name.
  
    1   │ - <div·className="hover:bg-gradient-to-r"·/>;
      1 │ + <div·className="hover:bg-linear-to-r"·/>;
    2 2 │

Valid

1
<div className="grow hover:bg-linear-to-r text-ellipsis inset-s-4" />;

Recognized class strings

This rule checks the attributes and functions recognized by the top-level tailwind configuration.