noTailwindArbitraryValue

HTML
JSX and TSX

Summary

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 class="w-[400px]"></div>

code-block.html:1:15 lint/nursery/noTailwindArbitraryValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div class=“w-[400px]”></div>
      │               ^^^^^^^
    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 class="text-[#555] bg-white"></div>

code-block.html:1:18 lint/nursery/noTailwindArbitraryValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div class=“text-[#555] bg-white”></div>
      │                  ^^^^^^
    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 class="[color:red]"></div>

code-block.html:1:13 lint/nursery/noTailwindArbitraryValue ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div class=“[color:red]”></div>
      │             ^^^^^^^^^^^
    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 class="w-4 text-red-500 bg-white"></div>

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

Options

By default, this rule checks the class attribute. The attributes option adds more HTML attributes to check.

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

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

attributes

Additional HTML attribute names to check.

Default: [] (the class attribute is always checked).

Summary

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.

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.

noTailwindArbitraryValue

Summary

How to configure

Description

Examples

Invalid

Valid

Options

attributes

Related links

Summary

How to configure

Description

Examples

Invalid

Valid

Options

attributes

functions

Related links