Tailwind CSS v4 salió en enero de 2025 y, en 2026, ya va por la versión 4.3. No es una actualización más: cambia la forma de configurar el framework y lo acerca mucho al CSS estándar. Para un diseñador eso es una buena noticia, porque tus design tokens pasan a ser variables CSS normales.
En esta guía te explico qué cambia frente a v3 y qué han añadido las versiones 4.1 y 4.3. También verás cómo migrar sin romper nada y qué significa que Tailwind se haya unido a Shopify.
Qué cambia en Tailwind CSS v4 frente a v3
Estos son los cambios que más notarás en el día a día:
| Aspecto | Tailwind v3 | Tailwind v4 |
|---|---|---|
| Configuración | tailwind.config.js (JavaScript) | En el propio CSS, con @theme |
| Instalación | Varias piezas y un archivo de configuración | Un paquete y una línea de CSS: @import "tailwindcss"; |
| Archivos a escanear | Los defines tú en content | Detección automática (ignora lo que está en .gitignore) |
| Velocidad | Base | Compilación completa casi 4 veces más rápida; recompilaciones incrementales, más de 100 veces |
| Tokens de diseño | Viven en el archivo JS | Se exponen como variables CSS nativas |
| Colores | Paleta clásica (RGB) | Paleta renovada en OKLCH, con colores más vivos en pantallas P3 |
| Navegadores | Muy amplio | Safari 16.4+, Chrome 111+ y Firefox 128+ |
La última fila es la que más conviene tener presente: si tu cliente necesita dar soporte a navegadores antiguos, quédate en v3.4. v4 usa funciones modernas de CSS que esos navegadores no entienden.
Nuevo motor de configuración: todo en CSS
Adiós al tailwind.config.js gigante. En v4, la configuración vive en tu hoja de estilos, dentro de un bloque @theme:
@import "tailwindcss";
@theme {
--color-marca: oklch(0.62 0.19 250);
--font-display: "Inter", sans-serif;
--breakpoint-3xl: 1920px;
}Con esto ya puedes usar clases como bg-marca, font-display o 3xl:grid-cols-6. Los nombres de tus tokens en Figma pasan casi tal cual al código, y cambiar la paleta es editar una línea.
Variables CSS nativas: por qué importa
Tailwind v4 expone todos los tokens como variables CSS estándar (var(--color-marca)). Eso simplifica cosas que antes eran incómodas: el modo oscuro, el theming por cliente o usar tus colores en un SVG o en una librería externa sin duplicarlos. Si las variables CSS aún te suenan raras, repasa antes cómo utilizar las variables CSS.
Novedades de v4.0 a v4.3 que te interesan como diseñador
- Container queries integradas (v4.0):
@containery variantes como@md:para que un componente se adapte a su contenedor y no solo a la pantalla. - Degradados ampliados (v4.0): lineales con ángulo, cónicos y radiales, además de interpolación en OKLCH para transiciones más suaves.
- Transformaciones 3D (v4.0): utilidades como
rotate-x-*yperspective-*. - Sombras de texto y máscaras (v4.1):
text-shadow-*ymask-*, dos efectos que antes necesitaban CSS a mano. - Barras de scroll (v4.3):
scrollbar-thin,scrollbar-thumb-*yscrollbar-gutter-stablepara estilizar el scroll y evitar saltos de maquetación.
Si quieres ver cómo quedan estos efectos en CSS puro, tienes ejemplos en mis guías de funciones de CSS en 2026 y de microinteracciones web.
Tip: ¿prefieres no maquetar desde cero? En Envato Elements tienes plantillas y UI kits hechos con Tailwind y con licencia comercial. Antes de comprar, comprueba en la ficha si están actualizados a v4.
Cómo migrar tu proyecto sin romper nada
Tailwind ofrece una herramienta oficial de migración. Necesitas Node.js 20 o superior:
npx @tailwindcss/upgradeLee tu configuración de v3, la pasa a CSS y actualiza las clases que han cambiado de nombre en tus plantillas. Estos son los pasos que te recomiendo:
- Trabaja en una rama aparte, nunca directamente sobre main.
- Ejecuta la herramienta y revisa el diff con calma.
- Comprueba las utilidades renombradas (tabla de abajo) en las pantallas clave.
- Prueba en staging antes de hacer merge.
Las clases que cambian de nombre
| En v3 | En v4 |
|---|---|
shadow-sm / shadow | shadow-xs / shadow-sm |
rounded-sm / rounded | rounded-xs / rounded-sm |
blur-sm / blur | blur-xs / blur-sm |
outline-none | outline-hidden |
ring (3 px) | ring-3 (el ring de v4 es de 1 px) |
bg-opacity-50 | bg-black/50 (se eliminan las utilidades *-opacity-*) |
Si la web está en producción, mide antes los Core Web Vitals para confirmar después que la migración no introduce regresiones.
Errores comunes al migrar
- Migrar directamente sobre producción. Sin rama ni staging, cualquier clase renombrada que se escape rompe el estilo en vivo.
- No revisar los plugins. v4 sigue admitiendo plugins en JavaScript con la directiva
@plugin, pero comprueba que los de la comunidad que uses son compatibles. - Dejar la configuración a medias. Puedes seguir cargando tu
tailwind.config.jscon@configmientras migras, pero opciones comosafelistocorePluginsya no funcionan. Úsalo como puente, no como solución final. - Olvidar a los usuarios con navegadores antiguos. Revisa en tu analítica qué navegadores usan antes de migrar un proyecto con público amplio.
Compatibilidad con Figma y design tokens
Como la configuración ya es CSS, el paso de Figma al código es más directo: las variables de Figma o los tokens que exportes con plugins como Tokens Studio se traducen a variables dentro de @theme, con el mismo nombre. Si trabajas con un desarrollador, acordad la nomenclatura de los tokens desde el principio y os ahorraréis muchas idas y vueltas. Tienes más sobre cómo organizarlos en mi guía de sistemas de diseño en Figma.
¿Quieres aprenderlo con un curso guiado? En Udemy hay cursos de Tailwind CSS actualizados a v4, a menudo rebajados. Fíjate en la fecha de actualización del curso antes de comprarlo.
Preguntas frecuentes
¿Tailwind sigue siendo gratis tras unirse a Shopify?
Sí. En septiembre de 2026, Tailwind Labs anunció que se une a Shopify. En el mismo anuncio dejó claro que nada cambia con Tailwind CSS ni con sus demás proyectos de código abierto: siguen con licencia MIT y los mantiene el mismo equipo.
¿Tailwind v4 es compatible con mis plantillas de v3?
La mayoría se migran sin problemas con la herramienta oficial, que corrige las clases renombradas. Revisa sobre todo sombras, bordes redondeados, anillos y opacidades, y prueba en los navegadores de tu público.
¿Cuándo debería migrar a v4?
En proyectos nuevos, ya. En proyectos en producción estables, planifícalo para el próximo rediseño o refactor. Si tu público usa navegadores antiguos, sigue en v3.4 hasta que deje de ser un problema.
¿Tailwind v4 funciona con WordPress?
Sí, cuando controlas el HTML: temas a medida, temas de bloques propios o un frontend desacoplado (mira la guía de Headless WordPress). Con Elementor o Divi encaja mal, porque ellos generan su propio HTML y CSS.
¿Hay que saber CSS para usar Tailwind v4?
Sí, y ahora más que antes. La configuración vive en CSS y usa variables nativas, así que entender el CSS moderno te ayuda a sacarle partido. La buena noticia es que lo que aprendes es CSS estándar.
¿Cuánto se tarda en migrar de v3 a v4?
Depende del tamaño y de los plugins. Un proyecto pequeño suele quedar en una tarde con la herramienta oficial. En uno grande, lo que lleva tiempo es revisar pantallas y probar en navegadores, no el cambio en sí.
Conclusión
Tailwind v4 es la versión que acerca definitivamente el diseño al código: tus tokens son variables CSS y la configuración, una hoja de estilos. Si empiezas un proyecto, úsala ya. Si tienes proyectos en v3, pruébala en uno pequeño y migra el resto cuando toque rediseño.
¿Te interesa el CSS moderno? Cada semana comparto recursos y guías de diseño y desarrollo web en mi newsletter.
¿Ya has migrado algún proyecto a v4 o sigues en v3? Cuéntame tu experiencia en los comentarios.
