noTailwindRawColors (JavaScript)

Summary

Rule available since: v2.5.15
Diagnostic Category: lint/nursery/noTailwindRawColors
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-raw-colors

How to configure

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

Description

Disallow Tailwind CSS utility classes that use raw palette colors.

Palette colors such as pink-500 and slate-950 tie styles to specific colors instead of the role those colors play. Design system color names such as primary or muted let a design system change its palette without editing each component. This rule checks color utilities, including variants and opacity modifiers. It allows custom color names, black, white, transparent, current, and inherit. This rule does not check arbitrary values such as bg-[#ff00aa]. It does not read your Tailwind CSS theme, so redefining a default palette name does not exempt it.

Examples

Invalid

1
<div className="bg-pink-500" />;

code-block.jsx:1:17 lint/nursery/noTailwindRawColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This Tailwind CSS class uses a raw palette color.
  
  > 1 │ <div className="bg-pink-500" />;
      │                 ^^^^^^^^^^^
    2 │ 
  
  ℹ Raw palette colors couple components to specific colors, making design-system changes harder.
  
  ℹ Use a color from your design system. Check your Tailwind config for the available colors.
  
  ℹ 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.

1
<div className="hover:text-red-500/80" />;

code-block.jsx:1:23 lint/nursery/noTailwindRawColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This Tailwind CSS class uses a raw palette color.
  
  > 1 │ <div className="hover:text-red-500/80" />;
      │                       ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Raw palette colors couple components to specific colors, making design-system changes harder.
  
  ℹ Use a color from your design system. Check your Tailwind config for the available colors.
  
  ℹ 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
<div className="bg-primary hover:text-muted-foreground" />;

1
<div className="bg-white text-black border-transparent fill-current stroke-inherit" />;

Recognized class strings

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

Options

allowedColors

Default: []

Exact palette colors to allow. Entries are case-sensitive color names, such as slate-950 or pink-500, without utility prefixes, variants, or opacity modifiers. Allowing pink-500 permits it in every color utility, including variants and opacity modifiers; it does not allow other pink shades.

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noTailwindRawColors": {
6
          "level": "on",
7
          "options": {
8
            "allowedColors": [
9
              "pink-500"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
<div className="bg-pink-500 hover:text-pink-500/80 border-black" />;