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
- project
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]. Giving a default palette name another value in your Tailwind CSS theme does not exempt it.

When the tailwind.stylesheet option points at the CSS file that holds your Tailwind CSS configuration, the rule also lists up to three classes to use instead, such as bg-brand for bg-pink-500. Each one sets a color from your theme that looks similar to the reported one. It can only compare theme colors whose value is written out, such as --color-brand: #00f. It skips colors that refer to another value, such as --color-brand: var(--brand).

Biome scans your project when this rule is enabled, so that it can read the stylesheet and the files it imports. The scan happens even if tailwind.stylesheet isn’t set.

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" />;