no-deprecated-classes
Disallow deprecated Tailwind CSS v4 classes
Qué hace esta regla
Marca cualquier clase que fue renombrada cuando Tailwind pasó de v3 a v4 y la reescribe en el lugar con un auto-fix. El mapeo es un DEPRECATED_MAP hardcodeado — sin heurísticas, sin consultas al DS sobre el nombre viejo. Ejemplos: flex-grow → grow, flex-shrink → shrink, overflow-ellipsis → text-ellipsis, decoration-clone → box-decoration-clone, bg-gradient-to-r → bg-linear-to-r (y el resto de las direcciones de gradient). Los variants y modificadores ! (important) se preservan en ambos lados de la reescritura.
DS-dependiente — requiere settings.tailwindcss.entryPoint. La regla usa el design system para saber contra qué archivo está trabajando y así jugar bien con el resto del plugin (en particular, no-unknown- classes omite las clases que esta regla marca para que no veas dos diagnósticos por el mismo token). Si el design system no puede cargar, la regla emite un único diagnóstico fatal designSystemUnavailable por archivo en vez de pasar en silencio.
Opciones
Esta regla no tiene opciones propias más allá del override estándar entryPoint (string, defaultea a settings.tailwindcss.entryPoint). Configura el entry point en settings.tailwindcss.entryPoint para todo el proyecto en vez de por-regla cuando puedas.
Ejemplos
✗ Incorrecto
// Aliases de flex de v3 — v4 sacó el prefijo `flex-`
<div className="flex-grow flex-shrink-0" />
// Dirección de gradient — renombrada a bg-linear-to-*
<div className="bg-gradient-to-r from-blue-500 to-purple-500" />
// Alias de text overflow y shorthand de box-decoration
<div className="overflow-ellipsis" />
<div className="decoration-clone" />
// Variants e important se preservan en la salida
<div className="hover:!flex-grow" />✓ Correcto
// Spellings post-migración
<div className="grow shrink-0" />
<div className="bg-linear-to-r from-blue-500 to-purple-500" />
<div className="text-ellipsis" />
<div className="box-decoration-clone" />
<div className="hover:!grow" />Interacciones con otras reglas
no-unknown-classes: omite silenciosamente cualquier clase presente enDEPRECATED_MAP. No vas a recibir "unknown class" más "deprecated class" paraflex-grow— solo la deprecación. Mantén ambas activas.enforce-canonical: cubre un conjunto estrictamente más grande que esta regla — reescribe formas válidas-pero-no-canónicas (-m-0→m-0,start-2→inset-s-2) y también atrapa todas las deprecaciones. Correr ambas está bien; los autofixes no conflictúan. Eligeno-deprecated-classescuando quieres un pase rápido, hardcodeado y sin DS; eligeenforce-canonicalpara el cleanup completo con DS.no-restricted-classes: ortogonal. Esa la usas para bloquear clases válidas; esta solo se dispara con la lista fija de renames v3→v4.
Cuándo desactivarla
- Sigues en Tailwind v3 y los nombres nuevos no resuelven contra tu design system. Fija el plugin y desactiva esta regla hasta que migres.
- Manténs a propósito una capa de clases v3-compatibles al lado de v4 (por ejemplo, una librería compartida que apunta a ambos). En ese caso prefiere un
eslint-disablepuntual en el archivo antes que un disable a nivel proyecto.