noTailwindRawColors (JavaScript)

Summary

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].

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

Supported class strings

The rule checks class and className JSX attributes and string arguments to clsx, tw, twMerge, twJoin, cva, tv, cn, cc, cnb, and ctl. Tagged templates using these names, including members such as tw.div, are also checked. Static template chunks and class expressions in JSX, Svelte, Vue, and Astro attributes are checked. Dynamically constructed class names are not resolved. The rule does not read your Tailwind configuration; redefining a default palette name does not exempt it.

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