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" />;

Options

By default, this rule checks the class and className JSX attributes. The attributes option adds more JSX attributes to check, and functions enables checking string arguments and tagged templates in matching utilities.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindArbitraryValue": {
6
          "level": "on",
7
          "options": {
8
            "attributes": [
9
              "classList"
10
            ],
11
            "functions": [
12
              "clsx"
13
            ]
14
          }
15
        }
16
      }
17
    }
18
  }
19
}

attributes

Additional JSX attribute names to check.

Default: [] (the class and className attributes are always checked).

functions

Function or tagged template names whose classes will be checked for arbitrary values.

Default: [].

1
<div className={clsx("w-[400px]")} />;

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

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div className={clsx("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.