noTailwindRestyledComponents (JavaScript)

Summary

Diagnostic Category: lint/nursery/noTailwindRestyledComponents
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- tailwind
Sources:
- Inspired from shadcn/no-restyle

How to configure

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

Description

Disallow Tailwind utilities that override the appearance of components.

A design system should own its components’ appearance. Use component props for supported visual variants instead of overriding them with utility classes.

The rule reports utilities in these categories:

color, such as bg-red-500 and text-white
typography, such as text-sm and font-bold
spacing, such as p-4 and gap-2
shape, such as rounded-none and border-2
effects, such as shadow and opacity-50
motion, such as transition and animate-spin

Variants, important modifiers, and arbitrary values don’t change the category, so hover:bg-red-500, rounded-none!, and p-[3px] are reported too. Arbitrary properties that set these styles, such as [font-size:14px], are also reported. Other utilities, such as sizing, positioning, and margins, are ignored.

Components are elements with capitalized names such as Button, member names such as UI.Button, and custom elements with hyphenated names such as my-button. Native elements are not checked. The rule checks class and className, including literal branches of conditionals and common class helper calls. In Astro, Svelte, and Vue files, it also checks class expressions such as class={...}, Astro’s class:list={...}, and Vue’s :class="...".

Examples

Invalid

1
<Button className="rounded-none" />;

code-block.jsx:1:20 lint/nursery/noTailwindRestyledComponents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This Tailwind utility restyles a component.
  
  > 1 │ <Button className="rounded-none" />;
      │                    ^^^^^^^^^^^^
    2 │ 
  
  ℹ The design system should manage the component's appearance.
  
  ℹ Use a supported component variant or move this style into the component's definition.
  
  ℹ This rule is still being actively worked on, so it may be missing features or have rough edges. Visit https://github.com/biomejs/biome/issues/11342 for more information or to report possible bugs.
  
  ℹ 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
<Button variant="danger" className="mt-4 w-full" />;
2
<button className="rounded-none" />;

Recognized class strings

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

Options

allow

Default: [].

Allows categories or classes on selected components. Each entry contains:

components: a component name, an array of names, or "*" for all components.
categories: any of color, typography, spacing, shape, effects, or motion. Default: [].
classes: exact classes, including variants and modifiers. Default: [].

A name matches any segment of a member name, so both UI and Button match UI.Button. Dotted names such as UI.Button match consecutive segments.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindRestyledComponents": {
6
          "level": "on",
7
          "options": {
8
            "allow": [
9
              {
10
                "components": "Button",
11
                "categories": [
12
                  "shape"
13
                ],
14
                "classes": [
15
                  "hover:shadow-lg"
16
                ]
17
              }
18
            ]
19
          }
20
        }
21
      }
22
    }
23
  }
24
}

1
<Button className="rounded-none hover:shadow-lg" />;