useTailwindVariablesShorthand (JavaScript)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/useTailwindVariablesShorthand
This rule has a safe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
Sources:
- Same as better-tailwindcss/enforce-consistent-variable-syntax

How to configure

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

Description

Enforce the shorthand syntax for CSS variables in Tailwind CSS classes.

Tailwind CSS has a shorthand for a class whose value is a single CSS variable. You write the variable in parentheses, and Tailwind CSS adds var() for you. For example, bg-(--brand) generates the same CSS as bg-[var(--brand)]. This rule reports the longer form, so that every class in a project reads CSS variables the same way.

The rule checks the value of a class and the part after /, such as [var(--opacity)] in bg-red-500/[var(--opacity)]. A fallback value is kept, so bg-[var(--brand,#000)] becomes bg-(--brand,#000).

The rule only reports a value that is a single var() with nothing around it. It doesn’t report w-[calc(var(--width)+1rem)] or text-[length:var(--size)]. It also doesn’t report classes that set a CSS property directly, such as [color:var(--brand)].

The shorthand requires Tailwind CSS v4.0 or later.

Examples

Invalid

1
<div className="bg-[var(--brand)]" />;

code-block.jsx:1:20 lint/nursery/useTailwindVariablesShorthand  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This Tailwind CSS value reads a CSS variable with [var()] instead of the shorthand.
  
  > 1 │ <div className="bg-[var(--brand)]" />;
      │                    ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Tailwind CSS adds var() to a variable written in parentheses, so the shorthand is shorter and generates the same CSS.
  
  ℹ 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 CSS variable shorthand.
  
    1 │ <div·className="bg-[var(--brand)]"·/>;
      │                    ----         -

1
<div className="hover:bg-red-500/[var(--opacity)]" />;

code-block.jsx:1:34 lint/nursery/useTailwindVariablesShorthand  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This Tailwind CSS value reads a CSS variable with [var()] instead of the shorthand.
  
  > 1 │ <div className="hover:bg-red-500/[var(--opacity)]" />;
      │                                  ^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Tailwind CSS adds var() to a variable written in parentheses, so the shorthand is shorter and generates the same CSS.
  
  ℹ 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 CSS variable shorthand.
  
    1 │ <div·className="hover:bg-red-500/[var(--opacity)]"·/>;
      │                                  ----           -

Valid

1
<div className="bg-(--brand) hover:bg-red-500/(--opacity)" />;
2
<div className="w-[calc(var(--width)+1rem)] [color:var(--brand)]" />;

Recognized class strings

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