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
- Inspired from shadcn/no-arbitrary-values

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.

Arbitrary variants, such as [&_svg]:size-4, and arbitrary modifiers, such as /[0.5] in bg-black/[0.5], are not reported.

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" />;
2
<div className="[&:nth-child(3)]:px-2 bg-black/[0.5]" />;

Recognized class strings

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

Options

allowedCategories

Default: []

Categories of utilities that may use arbitrary values:

layout, such as w-[320px], m-[13px], and top-[3px]
color, such as bg-[#333]
typography, such as text-[13px]
spacing, such as p-[13px] and gap-[3px]
shape, such as rounded-[10px] and border-[3px]
effects, such as shadow-[0_1px_2px_black] and opacity-[0.15]
motion, such as duration-[250ms]

An arbitrary property belongs to the category of the CSS property it sets, so [padding:13px] is in spacing.

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

1
<div className="w-[320px] m-[13px]" />;

1
<div className="p-[13px]" />;

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

  ℹ Found an arbitrary value in a Tailwind CSS class.
  
  > 1 │ <div className="p-[13px]" />;
      │                   ^^^^^^
    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.

allowedClasses