Hyvä 1.4.4 con Tailwind v4 y Oxide: qué cambia, qué rompe y cómo actualizar sin sustos

TL;DR: Hyvä 1.4.4 (marzo 2026) migra a Tailwind CSS v4 con motor Oxide en Rust — builds 5-10x más rápidos. Trae nuevos componentes UI, mejoras de performance (~10-15% mejor LCP) y mejor soporte para Magento 2.4.7+. Hay breaking changes: utility classes deprecated, sintaxis CSS-first en tailwind.config, plugins v3 requieren actualización. Upgrade desde 1.3.x: 1-3 días para sitios estándar, 1-2 semanas con mucha customización. Requiere Magento 2.4.5+ y PHP 8.2 (8.3 recomendado).

#Qué trae Hyvä 1.4.4 (cambios significativos)

#Los 4 breaking changes que debes conocer

#Breaking 1 — Utility classes deprecated en Tailwind v4

Algunas utility classes que existían en Tailwind v3 fueron renombradas o removidas en v4. Las más comunes:

• • shadow-sm → shadow-xs (Tailwind renombró el sistema de shadows).
• • bg-opacity-{n} → usar opacity directa en color (ej. bg-black/50).
• • rounded-tl-lg etc. → siguen funcionando pero recomienda rounded-tl-lg con sintaxis logical properties.
• • Algunas spacing utilities cambiaron de scale (ej. space-y-4 sigue igual pero hay nuevos sizes).

# Buscar utility classes deprecated en tu proyecto
grep -rE "shadow-sm|bg-opacity-|divide-opacity-" \
  app/design/frontend/Hyva/[tu-theme]/

# Reemplazar con find+replace automatizado
find app/design/frontend/Hyva/[tu-theme]/ -type f -name "*.phtml" \
  -exec sed -i.bak 's/shadow-sm/shadow-xs/g' {} \;

#Breaking 2 — tailwind.config sintaxis CSS-first

Tailwind v4 introduce sintaxis CSS-first opcional. El config en JavaScript sigue funcionando pero el approach recomendado es declarar tu config directo en CSS.

/* Antes (Tailwind v3, JS config) */
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0A0A0A',
      }
    }
  }
}

/* Después (Tailwind v4, CSS-first) */
/* En tu CSS principal */
@import "tailwindcss";

@theme {
  --color-primary: #0A0A0A;
}

#Breaking 3 — Plugins Tailwind v3 requieren actualización

Si usas plugins de Tailwind v3 (forms, typography, aspect-ratio, container-queries), debes actualizar a versiones v4 compatible. La mayoría tienen versión v4 disponible.

# Actualizar plugins comunes
npm install -D \
  @tailwindcss/forms@latest \
  @tailwindcss/typography@latest \
  @tailwindcss/container-queries@latest

# Verificar compatibilidad
npx tailwindcss --version
# Debe mostrar v4.x.x

#Breaking 4 — Configuración de purge cambia

Tailwind v4 cambia el mecanismo de purge. purge ya no se usa — ahora es content detection automática. Si tenías configuración custom de purge, debes revisarla.

#Checklist técnico de upgrade (recomendado en orden)

#Pre-upgrade (1 día)

• • Verificar que tu Magento está en 2.4.5+ y PHP 8.2+ (Hyvä 1.4 mínimo).
• • Crear branch git específico para el upgrade.
• • Snapshot completo de staging (db + files) para rollback.
• • Documentar customizaciones actuales (templates, components, JS).

#Upgrade core (2-4 horas)

• • Actualizar Hyvä Theme via Composer a 1.4.4.
• • Actualizar Tailwind CSS dependencies a v4.
• • Actualizar plugins de Tailwind a versiones v4 compatible.
• • Migrar tailwind.config a sintaxis nueva (CSS-first opcional).
• • Ejecutar bin/magento setup:upgrade && setup:di:compile.

#Audit y fix de breaking changes (1-3 días)

• • Buscar utility classes deprecated en .phtml y .css.
• • Reemplazar bg-opacity-/divide-opacity- con sintaxis nueva.
• • Revisar componentes con !important inline.
• • Probar componentes con plugins (forms, typography).
• • Validar que los styles compilan sin warnings.

#QA en staging (3-5 días)

• • Visual QA de todas las páginas principales (home, categoría, producto, checkout).
• • Test de checkout completo (Hyvä Checkout o nativo).
• • Test en mobile (iOS Safari y Android Chrome).
• • Test de pagos (Conekta, MercadoPago si aplica).
• • Lighthouse comparison antes vs después.

#Cutover a producción (1 día)

• • Backup de prod antes de deploy.
• • Deploy en ventana de bajo tráfico (madrugada o domingo madrugada).
• • Monitoring intensivo primeras 24-48 horas (errores, performance, ventas).
• • Rollback plan listo si surge issue crítico.

#Mejoras de performance medidas (datos reales 2026)

De los upgrades ejecutados en clientes Panamerik en marzo-mayo 2026, estos son los lifts medidos:

#¿Vale la pena upgradear ahora o esperar a 1.5?

La regla simple: si tu Hyvä 1.3 está estable en producción sin issues notables, puedes esperar a Hyvä 1.5 (esperado Q3-Q4 2026) y hacer un upgrade más grande en ese momento. Si tienes alguno de estos issues, upgradea a 1.4 ahora:

• • Build times molestos (>30s) — Oxide resuelve esto de inmediato.
• • Performance objetivos no logrados — el ~12% de lift puede ser lo que necesitabas.
• • Quieres componentes Hyvä UI nuevos (60+ en 1.4 vs 40+ en 1.3).
• • Tu Magento subió a 2.4.7 y aprovechas mejor compatibilidad.

#Preguntas frecuentes

#¿Qué trae Hyvä 1.4.4 que vale la pena?

Hyvä 1.4.4 (marzo 2026) trae tres mejoras significativas: (1) migración completa a Tailwind CSS v4 con motor Oxide en Rust (build times 5-10x más rápidos), (2) nuevos componentes Hyvä UI listos para usar, (3) mejoras de performance en checkout y catálogo (~10-15% mejor LCP en promedio), y (4) mejor soporte para Magento 2.4.7+. Es la actualización más grande desde 1.2.

#¿Hyvä 1.4 con Tailwind v4 rompe customizaciones existentes?

Sí, hay breaking changes notables. Las customizaciones que dependen de utility classes deprecated en Tailwind v3 deben actualizarse. Configuraciones de tailwind.config.js cambian a sintaxis CSS-first. Algunos plugins de Tailwind v3 requieren versiones actualizadas. El upgrade típico toma 1-3 días para sitios con poca customización, 1-2 semanas para sitios con mucha personalización.

#¿Qué tan rápido es el motor Oxide de Tailwind v4?

Tailwind Oxide (motor en Rust) entrega builds de CSS 5-10x más rápidos que el motor JavaScript de Tailwind v3. Para proyectos Hyvä grandes, esto traduce de builds de 30-60 segundos a 3-10 segundos. En desarrollo (hot reload) la diferencia es notoria — cambios se reflejan casi instantáneamente.

#¿Debería actualizar mi Hyvä 1.3 a Hyvä 1.4 ahora?

Depende del caso. Si tu Hyvä 1.3 está estable en producción sin issues, puedes esperar a Hyvä 1.5 (esperado Q3 2026) para hacer un upgrade más grande de una vez. Si tienes issues de performance, build times molestos o quieres aprovechar los nuevos componentes UI, sí vale la pena upgradear ahora — el ROI llega rápido en developer productivity.

#¿Hyvä 1.4 funciona con qué versiones de Magento?

Hyvä 1.4 funciona oficialmente con Magento Open Source 2.4.5-2.4.7+ y Adobe Commerce equivalentes. Requiere PHP 8.2 o superior (PHP 8.3 recomendado para mejor performance). Si tu Magento está en 2.4.4 o anterior, debes actualizar Magento primero antes de migrar a Hyvä 1.4 — el orden importa.

#¿Cuánto tiempo toma actualizar de Hyvä 1.3 a 1.4?

Para una tienda Magento con Hyvä 1.3 y customizaciones estándar: 1-3 días si la customización es mínima, 3-7 días si tienes templates customizados extensos, 7-15 días si tienes muchos componentes hechos a mano que necesitan ajuste a Tailwind v4. Plan de QA recomendado: testing en staging por 5-7 días antes de pushear a producción.

#¿Qué bugs frecuentes aparecen al actualizar?

Los tres bugs más comunes: (1) styles que rompen porque Tailwind v4 cambió behavior de purge — solución: actualizar tailwind.config a sintaxis nueva. (2) Componentes con !important inline rotos por specificity cambios — solución: refactor a clases utility correctas. (3) Plugins de Tailwind v3 incompatibles — solución: actualizar a versiones v4 o reemplazar.