Tailwind 4.2: migrar start-* y end-* a inset-s-* e inset-e-*

Tailwind v4.2 introdujo un cambio pequeño pero limpio: las utilidades start-* y end-* quedaron obsoletas en favor de inset-s-* y inset-e-*. La motivación es de coherencia: el resto del sistema usa el prefijo inset- para utilidades de posicionamiento (inset-x-*, inset-y-*, inset-0, inset-auto), y las versiones lógicas inline no encajaban con ese patrón.

Las antiguas siguen funcionando, pero el equipo de Tailwind las dará por retiradas en una versión futura. Es buen momento para migrar proyectos activos sin prisa.

Qué hacían (y siguen haciendo) start-* y end-*

Son logical properties: la versión "inline-start" e "inline-end" de left y right. Se adaptan al modo de escritura del documento.

• En LTR (castellano, inglés): start-* equivale a left-* y end-* equivale a right-*.
• En RTL (árabe, hebreo): se invierte, sin tocar el HTML.

Mismo CSS subyacente: inset-inline-start e inset-inline-end. Lo que cambia con v4.2 es solo el prefijo de la clase Tailwind, no la propiedad CSS generada.

Equivalencias

El patrón es directo: sustituir start- por inset-s- y end- por inset-e-. El número o valor que viene después no cambia.

Antes (deprecado) Ahora (recomendado) CSS generado start-0 inset-s-0 inset-inline-start: 0 start-4 inset-s-4 inset-inline-start: 1rem start-auto inset-s-auto inset-inline-start: auto start-full inset-s-full inset-inline-start: 100% start-[10px] inset-s-[10px] inset-inline-start: 10px -start-2 -inset-s-2 inset-inline-start: -0.5rem end-0 inset-e-0 inset-inline-end: 0 end-6 inset-e-6 inset-inline-end: 1.5rem end-[20px] inset-e-[20px] inset-inline-end: 20px

Mismo principio para los valores arbitrarios, negativos y variables CSS: solo cambia el prefijo de la clase.

Migración automática vía CLI

Tailwind ofrece una herramienta oficial que reescribe las clases deprecadas en todo el proyecto:

npx @tailwindcss/upgrade

El comando:

• Detecta el código del proyecto (HTML, JSX, Vue, plantillas Blade, etc.).
• Sustituye start-* → inset-s-* y end-* → inset-e-* en todos los archivos.
• Reporta los cambios aplicados para revisión.

Recomendación práctica: pasarlo en una rama dedicada, hacer commit aislado solo de los renombres, y revisar el diff antes de mergear. El cambio es seguro pero es buena higiene tener el rebrand de utilidades en su propio commit por si en el futuro hay que revertir o auditar.

Migración manual con grep o búsqueda regex

Si prefieres tener control total o tu proyecto tiene patrones que el CLI no detecta bien:

# Encontrar todos los usos
grep -rn -E '\b(-?(start|end))-' src/

# Verificar con dry-run antes de tocar nada
sed -E 's/\b(-?)(start|end)-/\1inset-\2-/g; s/inset-start-/inset-s-/g; s/inset-end-/inset-e-/g' src/file.html

# Aplicar (usar con cuidado en proyectos grandes)
find src -type f -name "*.html" -exec sed -i.bak -E '
  s/\b(-?)start-/\1inset-s-/g;
  s/\b(-?)end-/\1inset-e-/g
' {} \;

Cuidado: este regex puede tener falsos positivos en cadenas que no son clases Tailwind (URLs con /start, atributos data-end, etc.). Si el proyecto es grande y mezcla código, el CLI oficial es más seguro.

Otras utilidades nuevas en v4.2 que conviene conocer

Mientras estés en zona de migración, vale la pena saber que v4.2 también añadió:

• Espaciado lógico de bloque: pbs-*, pbe-*, mbs-*, mbe-* (padding/margin block-start/end). Complementa los ps-*/pe-* que ya existían para inline-start/end. Útiles para sitios multilingüe que mezclan LTR + RTL.
• Tamaño lógico: inline-* (ancho lógico) y block-* (alto lógico). Versiones inset también: inset-s-* e inset-e-* que ya hemos cubierto arriba.
• Tipografía avanzada: font-features-* para font-feature-settings. Acceso directo a ligaduras, kerning y variantes numéricas sin escribir CSS.
• Paletas de color: mauve, olive, mist, taupe. Tonos neutros con personalidad.
• Integración Webpack oficial: @tailwindcss/webpack ya disponible.

Cuándo es seguro hacer la migración

Tipo de proyecto Recomendación Proyecto nuevo Usar inset-s-* / inset-e-* directamente desde el primer commit. Proyecto activo en desarrollo Migración automática en un sprint, commit aislado. Proyecto en producción estable, sin desarrollo activo Esperar a la siguiente versión que necesite tocar el frontend y migrar de paso. Proyecto con muchos terceros / plantillas externas Auditar primero qué controlas y qué no. Migrar solo lo propio.

Las clases antiguas seguirán funcionando hasta que Tailwind las elimine —no hay anuncio público de versión exacta, pero el patrón habitual del proyecto es mantener deprecadas durante varios ciclos antes de retirarlas. No hay urgencia, sí hay buen momento.

Por qué el cambio merece la pena

La razón no es solo coherencia visual de nombres. Las clases inset-* son el grupo más completo de utilidades de posicionamiento de Tailwind: incluyen inset-0 para todos los lados, inset-x-* e inset-y-* para ejes completos, inset-auto, variantes negativas y valores arbitrarios. Que inset-s-* e inset-e-* se sumen a esa familia hace que el sistema sea más predecible: si conoces el patrón inset, ya conoces el patrón lógico inline.

Lo que se gana no es velocidad ni capacidad nueva; se gana menos cosas que recordar. En un sistema con miles de clases utilitarias, eso es la diferencia entre tener un vocabulario que cabe en la cabeza y tener uno que obliga a consultar la docs cada vez.