noTailwindRawColors (HTML)

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 class="bg-pink-500"></div>

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

  ℹ This Tailwind CSS class uses a raw palette color.
  
  > 1 │ <div class="bg-pink-500"></div>
      │             ^^^^^^^^^^^
    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 class="hover:text-red-500/80"></div>

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

  ℹ This Tailwind CSS class uses a raw palette color.
  
  > 1 │ <div class="hover:text-red-500/80"></div>
      │                   ^^^^^^^^^^^^^^^
    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 class="bg-primary hover:text-muted-foreground"></div>

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

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 class="bg-pink-500 hover:text-pink-500/80 border-black"></div>