no-default-palette

Regla de oxlint que reporta colores de la paleta por defecto de Tailwind CSS, como bg-red-500, en un proyecto con colores propios, y nombra los que usar.

De un vistazo

Autofix	Sugerencias en el editor	Design system	Opciones
No	No	Obligatorio (entryPoint)	entryPoint, allow

Qué hace esta regla

Tailwind trae una paleta por defecto — red-500, gray-100, white, 288 colores en total — y tu theme agrega los suyos: brand, o los primary, muted y destructive de shadcn/ui. Cuando un proyecto ya tiene colores propios, un color de la paleta suele ser una fuga del design system: no sigue al theme, y bg-white sigue blanco en modo oscuro, donde bg-background no. Esta regla reporta cada clase que lee un color de la paleta, y nombra tus colores en el mensaje:

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

Lee lo que hace cada clase, no su nombre: cualquier utility que pone un color (bg-, text-, border-, ring-, from-, fill-, …), con variants y modificadores de opacidad (hover:bg-red-500/50), y un valor arbitrario que lee una variable de la paleta (bg-[var(--color-red-500)]). Un color de la paleta que tu theme redefine (--color-red-500: … en tu @theme) es tuyo, y no se reporta. transparent, current e inherit no son colores de la paleta.

Sin colores propios — Tailwind tal cual — la paleta es el design system del proyecto, y la regla no reporta nada.

DS-dependiente — necesita settings.tailwindcss.entryPoint para distinguir la paleta de tus colores. Sin autofix: a cuál de tus colores debe pasar un color de la paleta es una decisión de diseño.

Opciones

allow

string[], default [].

Colores de la paleta que se permiten, por nombre, o por prefijo con un * al final. white y black también son colores de la paleta, y se reportan salvo que los permitas.

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

entryPoint

string, opcional. Override por regla de settings.tailwindcss.entryPoint.

Ejemplos

Con un theme que declara --color-brand y --color-brand-light:

✗ Incorrecto

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

// Variants, modificadores de opacidad y cualquier utility de color leen la misma variable
<div className="hover:text-blue-600 bg-gray-900/50 from-emerald-400" />

// Un valor arbitrario que lee una variable de la paleta
<div className="bg-[var(--color-red-500)]" />

// white y black son colores de la paleta
<div className="bg-white" />

✓ Correcto

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

// No son colores de la paleta
<div className="bg-transparent text-current" />

// Permitidos por nombre o prefijo
// options: { "allow": ["white", "gray-*"] }
<div className="bg-white text-gray-900" />

Interacciones con otras reglas

• no-hardcoded-colors: la otra mitad. Reporta literales de color (bg-[#f00]); esta regla reporta colores de la paleta (bg-red-500). Juntas dejan solo los colores de tu theme.
• no-unknown-classes: un color del theme mal escrito (bg-brnd) no es de la paleta; esa regla lo reporta, junto al nombre que querías.
• no-raw-colors de @shadcn/lint reporta los mismos colores de la paleta en un proyecto shadcn/ui; usa una de las dos. Mira shadcn/ui y @shadcn/lint.

Cuándo desactivarla

• La paleta es tu design system, o parte de él, a propósito: permite esos colores con allow, o deja la regla apagada.
• Código que no es tuyo, como componentes vendorizados estilados con la paleta.