Colors

no-arbitrary-colors

Disallow arbitrary color values like bg-[#FF0000] in Tailwind classes.

Flags arbitrary color values inside Tailwind utility classes — bg-[#FF0000], text-[#333], border-[hsl(0,0%,50%)] — and steers the codebase back to the imported design-token palette. The most common form of design-system drift in AI-generated code: the model knows the brand hex, types it directly, and bypasses the token that exists for exactly that color.

Behavior

• Fixable: Yes — auto-fix replaces with the nearest token in your scale. When the replacement token resolves to the same hex as the arbitrary value (e.g. bg-[#1A5276] → bg-primary with primary=#1A5276), the GitHub Action renders it as a one-click `suggestion` block; closest-match fixes with a different pixel value render as a read-only code block with a "run `deslint fix` locally" nudge.
• Suggestions: Yes — surfaces the closest legal tokens.

Options

["error", {
  "allowlist": ["#1E3A5F"],
  "customTokens": { "brand-navy": "#1E3A5F" }
}]

Examples

Bad:

<div className="bg-[#FF5733] text-[#333]" />

Good:

<div className="bg-red-500 text-gray-700" />

Related rules

• consistent-color-paletteCap the number of unique color families used in a single file.
• dark-mode-coverageRequire a dark: variant for every background color class.
• a11y-color-contrastFlag text/background color combinations below WCAG AA contrast.

Use it

Enable no-arbitrary-colors in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-arbitrary-colors': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules