no-dynamic-classes

Regla de oxlint que reporta clases de Tailwind CSS armadas en runtime, como bg-${color}-500, que Tailwind nunca ve escritas y por eso no genera CSS para ellas.

De un vistazo

Autofix	Sugerencias en el editor	Design system	Opciones
No	No	Opcional — se usa si hay entryPoint	entryPoint

Qué hace esta regla

Tailwind genera CSS para los nombres de clase que encuentra escritos completos en tu código. Una clase armada en runtime — `bg-${color}-500`, `text-${size}`, `w-[${width}px]` — nunca aparece completa en ningún lado, así que Tailwind no emite nada para ella y el elemento se queda sin estilo sin avisar. En desarrollo solo funciona si esa misma clase está escrita completa en otra parte.

La regla reporta cada una de esas clases una vez, cuando el texto pegado a un ${} — o a un operando de +, "bg-" + color — empieza con una utilidad de Tailwind (bg-, grid-cols-, -mt-, w-[) o una variante (hover:, md:, data-). Una clase o lista completa que viene de una variable (`${base} p-4`, "p-4 " + extra) está bien, y también un texto que no es de Tailwind (`icon-${name}`, `${a}-${b}`). Una clase partida en dos strings ("bg-" + "red-500") también se reporta: Tailwind lee cada string por separado. No hay autofix: el arreglo es escribir completa cada clase a la que puede corresponder el valor.

DS-opcional. Con un entryPoint también cuentan las utilidades y variantes de tu proyecto (un namespace de @theme como bar-*); sin él, se usan las raíces de utilidades y variantes propias de Tailwind.

Lo que no ve: una variante elegida en runtime después del texto estático (`${breakpoint}:flex`).

Opciones

entryPoint

string, opcional. Override por regla de settings.tailwindcss.entryPoint, para leer las utilidades y variantes de tu proyecto.

Ejemplos

✗ Incorrecto

<div className={`bg-${color}-500 p-2`} />
<div className={`text-${size} font-bold`} />
<div className={`w-[${width}px]`} />
<div className={`hover:${hoverClass}`} />
<div className={cn(`p-${padding}`)} />
<div className={"text-" + tone} />

✓ Correcto

// Escribe completa cada clase a la que puede corresponder el valor
const bgByColor = { red: 'bg-red-500', blue: 'bg-blue-500' } as const
<div className={`${bgByColor[color]} p-2`} />

// Elige entre nombres de clase completos
<div className={cn(active ? 'bg-blue-500' : 'bg-gray-500')} />

// Un valor que de verdad es dinámico: una variable CSS, definida inline
<div className="w-(--width)" style={{ '--width': `${width}px` }} />

Interacciones con otras reglas

• no-unknown-classes ignora los fragmentos pegados (bg-, -500) — no son clases, y es esta regla la que los reporta.
• no-arbitrary-value: el arreglo con variable CSS de arriba es un valor arbitrario; permítelo con allowVariables: 'runtime'.

Cuándo desactivarla

• Tus clases están en un safelist (@source inline(…)), así que Tailwind las genera aparezcan o no en el código. Desactiva la regla en esos archivos, o en el proyecto si todo está en safelist.