noTailwindArbitraryValue (HTML)

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 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>

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

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

attributes

Additional HTML attribute names to check.

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