no-arbitrary-colors

This rule reports a color written as an arbitrary value, such as bg-[#123456]. The CSS works, but the color does not come from your theme, so a theme change does not reach it. No preset enables this rule.

Reported

style("bg-[#123456]");no-arbitrary-colors: arbitrary color `#123456` is forbidden for `background-color`; use a theme token or custom property

Fixed

style("bg-brand");

How to fix

Add the color to your theme with a name for its role, and use that name, as in the example:

@theme {
  --color-brand: #123456;
}

If the color already exists in the theme, use its name instead. To stop components from using the default palette directly, also enable no-restricted-theme-tokens.

Rule settings