noTailwindRestrictedClasses (HTML)

Summary

Rule available since: v2.6.8
Diagnostic Category: lint/nursery/noTailwindRestrictedClasses
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
- project
Sources:
- Inspired from better-tailwindcss/no-restricted-classes

How to configure

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

Description

Disallow Tailwind CSS classes and variants that your project doesn’t allow.

Teams often agree to avoid some Tailwind CSS classes, for example raw colors that have a named replacement in their design system, or layout utilities such as float-left that they’ve replaced with flexbox or grid. This rule reports the classes and variants that you list in its options, and shows the message you configure for each of them. Without any classes or variants configured, this rule doesn’t report anything.

Examples

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindRestrictedClasses": {
6
          "level": "on",
7
          "options": {
8
            "classes": {
9
              "text-green-500": "Use the success color from the design system.",
10
              "float-*": "Use flexbox or grid for layout."
11
            }
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Invalid

1
<div class="text-green-500"></div>

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

  ℹ The Tailwind CSS class text-green-500 isn't allowed in this project.
  
  > 1 │ <div class="text-green-500"></div>
      │             ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Use the success color from the design system.
  
  ℹ 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="md:float-left"></div>

code-block.html:1:16 lint/nursery/noTailwindRestrictedClasses ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The Tailwind CSS class float-left isn't allowed in this project.
  
  > 1 │ <div class="md:float-left"></div>
      │                ^^^^^^^^^^
    2 │ 
  
  ℹ Use flexbox or grid for layout.
  
  ℹ 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="text-success flex"></div>

How classes and variants are matched

A class is matched without its variants, its !, or its modifier, which is the part after a /, such as /50 in bg-red-500/50. So restricting bg-red-500 also reports hover:bg-red-500/50!. To match the modifier as well, include it in the key, such as bg-red-500/50. A fraction such as 1/2 in w-1/2 is part of the class, so restricting w-1 doesn’t report w-1/2.

A key matches a negative value only when the key starts with -. So restricting mt-4 doesn’t report -mt-4.

Wildcards

In a key, * stands for a whole part of a class, not for any characters. A class such as bg-red-500 has a utility name, bg, and a value, red-500.

bg-* matches every value of the bg utility, such as bg-red-500 and bg-[#fff].
*-md matches every utility whose value is md, such as shadow-md and max-w-md.
[color:*] matches every value of the color property written as an arbitrary property, such as [color:red].

Since the value of bg-red-500 is red-500, the key bg-red-* doesn’t match it. To restrict a color in every utility, use *-red-500.

In a variant key, * stands for one or more parts separated by -:

group-* matches variants that start with group-, such as group-hover and group-focus.
*-hover matches variants that end with -hover, such as group-hover and peer-hover.
[*] matches every arbitrary variant, such as [&_p].

Biome reports a configuration error for a * used in any other way, such as in bg-*-500.

Biome splits a class into its utility name and value using the utilities that Tailwind CSS provides by default. When the tailwind.stylesheet option points at the CSS file that holds your Tailwind CSS configuration, Biome also uses the utilities defined there with @utility. For example, with @utility slide-in-from-top-*, the key slide-in-from-top-* matches slide-in-from-top-4.

Biome scans your project when this rule is enabled, so that it can read the stylesheet and the files it imports.

When several keys match the same class or variant, the rule uses the first one.

Recognized class strings

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

Options

`classes`

Default: {}

The classes to report. Each key is a class, written without variants or !. Each value is the message to show, or an object with these optional fields:

message: the message to show.
use: the class to use instead. When the key doesn’t contain *, the rule offers a fix that replaces the class with this value and keeps its variants, !, and modifier. The rule doesn’t offer the fix when this value is also restricted.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindRestrictedClasses": {
6
          "level": "on",
7
          "options": {
8
            "classes": {
9
              "bg-green-500": {
10
                "message": "Use the success color from the design system.",
11
                "use": "bg-success"
12
              }
13
            }
14
          }
15
        }
16
      }
17
    }
18
  }
19
}

Invalid

1
<div class="hover:bg-green-500/50"></div>

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

  ℹ The Tailwind CSS class bg-green-500 isn't allowed in this project.
  
  > 1 │ <div class="hover:bg-green-500/50"></div>
      │                   ^^^^^^^^^^^^
    2 │ 
  
  ℹ Use the success color from the design system.
  
  ℹ Use bg-success 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.
  
  ℹ Unsafe fix: Use bg-success instead.
  
    1   │ - <div·class="hover:bg-green-500/50"></div>
      1 │ + <div·class="hover:bg-success/50"></div>
    2 2 │

Valid

1
<div class="hover:bg-success/50 bg-green-600"></div>

`variants`

Default: {}

The variants to report, such as dark or group-hover. Each key is a variant, written without the : that follows it. A variant is matched without its modifier, so group-hover also matches group-hover/menu. The values work the same way as in classes.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindRestrictedClasses": {
6
          "level": "on",
7
          "options": {
8
            "variants": {
9
              "dark": "This project doesn't support dark mode.",
10
              "[*]": "Add a named variant to the Tailwind CSS configuration instead."
11
            }
12
          }
13
        }
14
      }
15
    }
16
  }
17
}

Invalid

1
<div class="dark:bg-black"></div>

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

  ℹ The Tailwind CSS variant dark isn't allowed in this project.
  
  > 1 │ <div class="dark:bg-black"></div>
      │             ^^^^
    2 │ 
  
  ℹ This project doesn't support dark mode.
  
  ℹ 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="[&_p]:mt-2"></div>

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

  ℹ The Tailwind CSS variant [&_p] isn't allowed in this project.
  
  > 1 │ <div class="[&_p]:mt-2"></div>
      │             ^^^^^
    2 │ 
  
  ℹ Add a named variant to the Tailwind CSS 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="hover:bg-black md:mt-2"></div>

noTailwindRestrictedClasses (HTML)

Summary

How to configure

Description

Examples

Invalid

Valid

How classes and variants are matched

Wildcards

Recognized class strings

Options

classes

Invalid

Valid

variants

Invalid

Valid

Related links

`classes`

`variants`