noTailwindArbitraryValue (JavaScript)

Summary

Rule available since: v2.5.7
Diagnostic Category: lint/nursery/noTailwindArbitraryValue
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
Sources:
- Same as tailwindcss/no-arbitrary-value

How to configure

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

Description

Disallow arbitrary values in Tailwind CSS utility classes.

Arbitrary values (e.g. w-[400px], text-[#555]) and arbitrary properties (e.g. [color:red]) bypass Tailwind’s configured theme scales. This rule reports them so teams can keep styling constrained to named utilities from their Tailwind configuration.

Examples

Invalid

1
<div className="w-[400px]" />;

code-block.jsx:1:19 lint/nursery/noTailwindArbitraryValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div className="w-[400px]" />;
      │                   ^^^^^^^
    2 │ 
  
  ℹ Arbitrary values bypass Tailwind's theme configuration, defeating design-system consistency and making styles harder to refactor.
  
  ℹ Use a named utility from your Tailwind configuration 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.

1
<div className="text-[#555] bg-white" />;

code-block.jsx:1:22 lint/nursery/noTailwindArbitraryValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div className="text-[#555] bg-white" />;
      │                      ^^^^^^
    2 │ 
  
  ℹ Arbitrary values bypass Tailwind's theme configuration, defeating design-system consistency and making styles harder to refactor.
  
  ℹ Use a named utility from your Tailwind configuration 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.

1
<div className="[color:red]" />;

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

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div className="[color:red]" />;
      │                 ^^^^^^^^^^^
    2 │ 
  
  ℹ Arbitrary values bypass Tailwind's theme configuration, defeating design-system consistency and making styles harder to refactor.
  
  ℹ Use a named utility from your Tailwind configuration 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.

Valid

1
<div className="w-4 text-red-500 bg-white" />;

1
<div className="[&:nth-child(3)]:px-2" />;

The rule checks class and className JSX attributes, and strings passed to clsx, tw, twMerge, twJoin, cva, tv, cn, cc, cnb, and ctl. Tagged templates using these helpers, including members such as tw.div, are also checked.