Qué viene después de Tailwind: UnoCSS, Master CSS, Open Props y el CSS nativo

El 9 de septiembre de 2026, Adam Wathan anunció que Tailwind Labs pasa a formar parte de Shopify. El framework de utilidades CSS que se instala más de 110 millones de veces por semana según el propio anuncio tendrá, por fin, un propietario con espalda financiera. También llega con una explicación incómoda: el negocio que lo sostenía, la venta de componentes y plantillas, se ha resentido con las herramientas de programación asistida por IA, que generan interfaces completas sin que nadie compre nada.

Los datos oficiales son sencillos. Tailwind CSS y el resto de proyectos abiertos siguen con licencia MIT y con el mismo equipo al frente, ahora con el respaldo de Shopify. En el lado comercial, la empresa deja de intentar crecer: Tailwind Plus y ui.sh siguen disponibles para quienes ya los tenían, pero se cierran las altas de clientes nuevos. Nadie se queda sin librería, pero la pregunta que se hace medio sector es qué hay más allá de Tailwind y, sobre todo, si el CSS nativo va a terminar haciendo innecesaria la capa intermedia.

Por qué Tailwind marcó una época (y dónde chocaba)

Tailwind llegó para sustituir a Bootstrap en el imaginario de muchos equipos: en lugar de componentes ya hechos, ofrecía clases de utilidad (p-4, text-sm, bg-red-500) que se combinan directamente en el HTML. La versión 4, publicada a comienzos de 2025, simplificó la configuración con un enfoque «CSS first» y la línea 4.3, de mayo de 2026, añadió utilidades para estilar barras de desplazamiento, más propiedades lógicas y mejor soporte de @variant.

Su límite histórico era el catálogo cerrado. Si el sistema define tonos rojos de 100 en 100 y el diseño pide un 550, hay que salirse con un valor arbitrario o con CSS propio. Windi CSS y Twind intentaron resolverlo generando las reglas a demanda, pero Tailwind incorporó la idea con su motor JIT y ambos proyectos acabaron abandonados por sus autores. De aquel experimento sobreviven otras herramientas con enfoques distintos, que es lo que interesa ahora.

Motores a demanda: UnoCSS y Master CSS

UnoCSS

Creado por Anthony Fu, UnoCSS no es un framework con un catálogo fijo, sino un motor de reglas atómico. Analiza el código fuente, detecta qué clases se usan y genera solo ese CSS. Una clase como bg-red-550 existe en cuanto se escribe, siempre que haya una regla que sepa interpretarla. Las reglas pueden ser estáticas o dinámicas, estas últimas con expresiones regulares:

rules: [
  [/^m-(d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
],
variants: [
  {
    match: s => s.startsWith('hover:') ? s.slice(6) : null,
    selector: s => `${s}:hover`,
  },
]

El inconveniente de ese enfoque es evidente: con diez o veinte reglas dinámicas, las expresiones regulares se vuelven difíciles de mantener. A cambio, UnoCSS ofrece presets que reproducen la sintaxis de Tailwind, de Windi o de Bootstrap, además del «modo atributivo», que permite agrupar utilidades en atributos HTML en vez de amontonarlas en class:

<button
  bg="blue-400 hover:blue-500 dark:blue-500"
  text="sm white"
  p="y-2 x-4"
  border="2 rounded blue-200"
>
  Botón
</button>

Las versiones publicadas en 2026 siguen en la rama 66.x, con un ritmo de lanzamientos muy alto, algo habitual en el ecosistema que rodea a Vite y Vue.

Master CSS

Master CSS también genera estilos a demanda, pero no se apoya en un diccionario de nombres inventados: su sintaxis se parece a las propiedades CSS reales, con la forma propiedad:valor. Sus autores presentan un motor «virtual» que puede funcionar en el navegador (modo runtime), en el servidor o en tiempo de compilación. Un ejemplo de su documentación muestra cómo se condensan reglas repetidas con atajos para animaciones, transiciones y márgenes.

<!-- Antes -->
<a class="animation-name:fade animation-duration:1s animation-timing-function:ease transition-property:opacity transition-duration:.3s margin-top:1rem margin-bottom:1rem margin-right:2rem margin-left:2.5rem">

<!-- Después -->
<a class="@fade|1s|ease ~opacity|.3s m:16|32|16|40">

La contrapartida es que obliga a pensar más en CSS y menos en un vocabulario propio, lo que es una ventaja para quien domina el lenguaje y una barrera para quien venía de Tailwind. Su versión 2.0 lleva meses en fase de «release candidate»: los listados de paquetes muestran ya más de sesenta candidatas, así que conviene tratarla como software en pruebas hasta que se publique la estable.

Open Props: variables CSS y nada más

En el extremo contrario está Open Props, de Adam Argyle (Google Chrome). No tiene motor, ni paso de compilación, ni JavaScript: es un conjunto de propiedades personalizadas de CSS con valores ya pensados para colores, sombras, gradientes, tipografía, tamaños, animaciones, curvas de easing, bordes, z-index y media queries. Se usa desde un CDN o se instala con npm, y admite importar solo la parte necesaria. También incluye un archivo de «normalize» con modo claro y oscuro.

button.blue {
  color: var(--blue-6);
  background-color: var(--blue-0);
  border: 1px solid var(--blue-1);
  text-shadow: 0 1px 0 var(--blue-2);

  &:hover {
    background-color: var(--blue-1);
  }
}

Aquí no hay generación a demanda: si falta un tono, se crea una variable propia. Pero se escribe CSS estándar, con anidamiento nativo, y el resultado no depende de ninguna herramienta que pueda quedar sin mantenimiento. Para webs de contenido, documentación o proyectos pequeños es probablemente la opción de menor riesgo.

CSS escrito en JavaScript sin coste en ejecución

Una tercera familia lleva los estilos al código JavaScript o TypeScript, pero los extrae a hojas CSS estáticas durante la compilación («zero-runtime»), de modo que el navegador no ejecuta nada adicional. Tres nombres dominan este terreno:

• Vanilla Extract (creado en Seek): estilos como objetos TypeScript con tipado completo, en ficheros .css.ts. Es lo más parecido a escribir CSS con comprobación de tipos.
• StyleX (Meta): pensado para equipos grandes. Los estilos son deterministas, de forma que el último que se aplica gana siempre, sin guerras de especificidad. Se usa en Facebook, Instagram y WhatsApp.
• Panda CSS (equipo de Chakra UI): ofrece utilidades al estilo Tailwind, pero escritas como objetos JavaScript con tipos. Su versión 2.0, anunciada en septiembre de 2026, reescribe el compilador en Rust manteniendo la API de estilos.

import { style } from '@vanilla-extract/css';

export const container = style({
  padding: 10,
  borderLeft: '1px solid red',
});

Los beneficios son reales: se acabaron los errores tipográficos en nombres de propiedades y se pueden compartir tokens de diseño con el resto del código. El precio también: estas herramientas casan el proyecto con una sintaxis y un ecosistema concretos, y cambiar de una a otra implica reescribir los estilos.

Tabla comparativa

Lo que el propio CSS ya está resolviendo

Quienes esperan que el lenguaje absorba las ventajas de estas herramientas tienen motivos para el optimismo, aunque con matices. Varias piezas ya existen, y el reparto entre navegadores es muy desigual:

• if(): valores condicionales dentro de una declaración, con consultas style(), media() y supports(). Chrome lo incluye desde la versión 137 (mayo de 2025). Firefox no lo ha lanzado y Safari lo tiene en sus versiones de prueba.
• @function: funciones personalizadas que reciben argumentos y devuelven un valor. Chrome 139 (agosto de 2025) fue el primero en lanzarlas; en Safari aparecen en Technology Preview y en Firefox siguen sin soporte.
• @mixin y @apply: reutilizar bloques completos de declaraciones. Forman parte del mismo borrador del W3C (CSS Functions and Mixins), pero MDN indica que ningún navegador los admite todavía, aunque Chromium ha retomado el prototipo en 2026.
• Anidamiento nativo, @layer, :has() y @container: ya compatibles en todos los navegadores principales y responsables de que mucho CSS ya no necesite preprocesadores.
• Masonry: tras años de debate sobre su nombre y su sintaxis, el CSSWG acordó en enero de 2026 llamarlo display: grid-lanes. Safari 26.4 lo incluye; Chrome y Edge lo tienen tras una bandera experimental. Debe usarse con @supports y una rejilla normal como alternativa.

Un ejemplo de función personalizada, con una comprobación de soporte para no romper nada en los navegadores que no la entienden:

@function --doble(--valor <length>) returns <length> {
  result: calc(var(--valor) * 2);
}

.caja {
  width: 40px; /* alternativa */
}

@supports (width: --doble(20px)) {
  .caja { width: --doble(20px); }
}

Es decir, la reutilización que algunos echan en falta (aplicar un bloque de estilos dentro de otro) ya tiene propuesta formal con @mixin y @apply, sin necesidad de inventar una sintaxis nueva. Lo que todavía no existe es la generación de clases a partir de valores en el nombre, es decir, escribir class="btn:danger" y que el navegador cree la regla. Eso sigue siendo territorio de motores como UnoCSS y Master CSS.

Cómo decidir

• Proyecto actual con Tailwind: no hay motivo para migrar. La licencia es MIT, el equipo continúa y la versión 4.x se sigue publicando. La adquisición cambia quién paga, no el código.
• Proyecto nuevo con Vite y mucha personalización: merece la pena probar UnoCSS, sobre todo si se quiere compatibilidad con clases de Tailwind y reglas propias.
• Sitio de contenido o proyecto que debe durar: CSS nativo con Open Props, con anidamiento y capas, y sin build.
• Aplicaciones grandes con TypeScript y varios equipos: StyleX o Vanilla Extract, que cuidan la coherencia y los tipos.
• Equipos acostumbrados a utilidades que quieren tipado: Panda CSS.

La lectura de fondo es que el mercado de los frameworks de CSS se está desplazando de «vender componentes» a «controlar el diseño»: sistemas de tokens, reglas que una IA pueda aplicar sin desbordarse y herramientas que generen lo mínimo necesario. Que Tailwind encuentre acomodo en Shopify da estabilidad al más usado, pero no cierra el debate. El ritmo lento del CSS, condicionado por el consenso entre los fabricantes de navegadores, hace que las soluciones intermedias sigan teniendo recorrido durante años. La estrategia más prudente consiste en apoyarse en variables, capas y anidamiento nativo, y mantener las utilidades como una capa fina y sustituible.

Imagen: Pexels / Pixabay