no-default-palette

oxlint rule that reports Tailwind CSS default palette colors, like bg-red-500, in a project whose theme defines its own colors — and names the ones to use.

At a glance

Autofix	Editor suggestions	Design system	Options
No	No	Required (entryPoint)	entryPoint, allow

What this rule does

Tailwind ships a default palette — red-500, gray-100, white, 288 colors in all — and your theme adds its own: brand, or shadcn/ui's primary, muted, destructive. Once a project has colors of its own, a palette color is usually a design-system leak: it doesn't follow the theme, and bg-white stays white in dark mode where bg-background wouldn't. This rule reports every class that reads a palette color, and names your colors in the message:

"bg-red-500" uses red-500 from Tailwind's default palette, not one of your theme colors: brand,
brand-light.

It reads what each class does, not its name: any utility that sets a color (bg-, text-, border-, ring-, from-, fill-, …), with variants and opacity modifiers (hover:bg-red-500/50), and an arbitrary value that reads a palette variable (bg-[var(--color-red-500)]). A palette color your theme redefines (--color-red-500: … in your @theme) is yours, and isn't reported. transparent, current and inherit aren't palette colors.

With no colors of its own — stock Tailwind — the palette is the project's design system, and the rule reports nothing.

DS-dependent — needs settings.tailwindcss.entryPoint to tell the palette from your colors. No autofix: which of your colors a palette color should become is a design decision.

Options

allow

string[], default [].

Palette colors to allow, by name, or by prefix with a trailing *. white and black are palette colors too, and are reported unless you allow them.

{ "tailwindcss/no-default-palette": ["error", { "allow": ["white", "black", "gray-*"] }] }

entryPoint

string, optional. Per-rule override of settings.tailwindcss.entryPoint.

Examples

With a theme that declares --color-brand and --color-brand-light:

✗ Incorrect

<div className="bg-red-500" />
// reports: "bg-red-500" uses red-500 from Tailwind's default palette

// Variants, opacity modifiers and every color utility read the same variable
<div className="hover:text-blue-600 bg-gray-900/50 from-emerald-400" />

// An arbitrary value that reads a palette variable
<div className="bg-[var(--color-red-500)]" />

// white and black are palette colors
<div className="bg-white" />

✓ Correct

<div className="bg-brand text-brand-light hover:bg-brand/90" />

// Not palette colors
<div className="bg-transparent text-current" />

// Allowed by name or prefix
// options: { "allow": ["white", "gray-*"] }
<div className="bg-white text-gray-900" />

Interactions with other rules

• no-hardcoded-colors: the other half. It reports color literals (bg-[#f00]); this rule reports palette colors (bg-red-500). Together they leave only your theme's colors.
• no-unknown-classes: a misspelt theme color (bg-brnd) isn't a palette color; that rule reports it, with the name you meant.
• @shadcn/lint's no-raw-colors reports the same palette colors in a shadcn/ui project; run one of the two. See shadcn/ui and @shadcn/lint.

When to disable it

• The palette is your design system, or part of it, on purpose: allow those colors with allow, or leave the rule off.
• Code you don't own, such as vendored components styled with the palette.