Tailwind CSS v4.3: scrollbars, container-size y variantes apiladas, sin CSS a mano

Tailwind CSS v4.3, disponible desde mayo de 2026 con la 4.3.3 ya en npm, añade utilidades first-party para scrollbars, la utilidad @container-size para container queries verticales y las variantes apiladas: tres features que eliminan CSS personalizado.

La línea v4 en contexto: por qué v4.3 es importante

Desde la 4.0, publicada en enero de 2025, Tailwind dejó de ser un framework de configuración en JavaScript para convertirse en un motor CSS-first. La configuración se hace con directivas como @theme, el procesado corre en un motor compilado en Rust y el framework aprovecha las features más recientes de la plataforma web. La 4.3 no rompe ese modelo: lo extiende con utilidades que hasta ahora obligaban a escribir CSS a mano o a instalar plugins de terceros.

Configuración CSS-first y motor en Rust desde la 4.0

El cambio de paradigma de la v4 se notó desde el primer día: adiós al tailwind.config.js como única fuente de verdad, hola a @import "tailwindcss" y a variables CSS definidas con @theme. El compilador en Rust aceleró los builds de forma drástica, y la generación bajo demanda se mantuvo como pilar. La 4.3 hereda toda esa base y añade valor encima, sin pedirte que reaprendas el framework.

De los container queries de la 4.0 al container-size de la 4.3

La v4 fue la primera en incorporar container queries de serie con la clase @container y variantes como @md:, que permiten estilizar un componente según el ancho de su contenedor en lugar del viewport. La 4.3 da el siguiente paso con @container-size: ahora el tamaño del contenedor también puede leerse dentro de él, incluyendo su dimensión vertical.

Scrollbars con utilidades de serie

Estilizar scrollbar sin CSS custom ni plugins

Hasta la 4.3, darle estilo a una scrollbar significaba escribir ::-webkit-scrollbar a mano, mantener los prefijos de Firefox y sincronizar colores con el tema. Ahora las utilidades de scrollbar son de primera clase: grosor, color del pulgar, color de la pista y estados. Para la mayoría de proyectos, el CSS personalizado de scrollbars deja de tener sentido.

Ejemplos: scrollbar fina, colores y estados hover

<div class="h-64 overflow-y-auto scrollbar-thin
            scrollbar-thumb-slate-400 scrollbar-track-slate-100
            hover:scrollbar-thumb-sky-500">
  <p>Contenido largo que se desplaza…</p>
</div>

La clase scrollbar-thin reduce el grosor, scrollbar-thumb-* y scrollbar-track-* controlan los colores, y las variantes como hover: funcionan igual que con cualquier otra utilidad. Se acabó el copiar y pegar el bloque de ::-webkit-scrollbar en cada proyecto.

@container-size: container queries verticales

Consultar el block-size del contenedor, no solo el ancho

Los container queries de la v4 medían el ancho (inline-size) del contenedor. La 4.3 añade la dimensión vertical con @container-size: el componente puede reaccionar a la altura (block-size) disponible, algo esencial en widgets de dashboards SaaS donde una tarjeta puede tener espacio variable.

Leer el tamaño del contenedor dentro de él con @container-size

<div class="@container @container-size">
  <div class="grid grid-cols-1 @md:grid-cols-3 @min-h-[24rem]:grid-cols-1">
    <div class="rounded-lg bg-white p-4 shadow">Widget A</div>
    <div class="rounded-lg bg-white p-4 shadow">Widget B</div>
    <div class="rounded-lg bg-white p-4 shadow">Widget C</div>
  </div>
</div>

El contenedor expone su tamaño con @container-size y los hijos lo consultan con variantes basadas en altura, como @min-h-[24rem]:, combinables con las variantes de ancho clásicas. Si el espacio vertical escasea, el layout se apila; si sobra, pasa a varias columnas.

Variantes apiladas (stacked compound variants)

Combinar varias variantes en una sola clase

Las variantes apiladas permiten encadenar varios modificadores en una sola clase para apuntar a estados compuestos. Donde antes necesitabas clases sueltas o CSS extra, ahora escribes una única utilidad:

<button class="hover:focus:ring-2 hover:focus:ring-sky-400
               dark:hover:bg-slate-700 dark:hover:text-white">
  Guardar
</button>

El orden de apilado importa y se lee igual que el CSS resultante: dark:hover:bg-slate-700 aplica el fondo solo cuando el modo oscuro y el hover coinciden. También puedes combinar variantes de container query con variantes de breakpoint para apuntar a rangos concretos, tal y como documenta la propia guía de responsive design.

Cuándo simplifican el HTML y cuándo conviene evitarlas

La regla práctica es la misma que con cualquier utilidad: si una clase apilada se repite en muchos elementos, vale la pena extraerla a un componente; si el apilado se vuelve ilegible (tres o cuatro prefijos seguidos), un nombre de clase semántico con @apply o un componente de Blade/React leerá mejor. Las variantes apiladas ganan cuando eliminan CSS condicional disperso por el código.

Guía de actualización a la 4.3

Desde 4.0/4.1: cambios y pasos

Actualizar desde la 4.0 o 4.1 es directo: npm install tailwindcss@latest y ejecutar los tests visuales. No hay cambios de configuración obligatorios; las nuevas utilidades conviven con las existentes. Revisa solo el CSS personalizado de scrollbars y las @container que ya tengas, porque ahora hay variantes que pueden sustituirlas.

Desde v3: el salto grande

Si vienes de la v3, el cambio es mayor: la configuración pasa de JavaScript a CSS-first con @theme, el build cambia de motor y algunas clases y variantes se renombraron. La guía oficial de upgrade cubre el proceso paso a paso, y en proyectos Laravel con Vite la integración de Tailwind v4 se hace sin configuración especial. Merece la pena: el build en Rust y las features de la 4.3 compensan el trabajo de migración.

Ejemplo práctico: widgets de dashboard con container-size

<section class="@container @container-size grid gap-4">
  <article class="rounded-xl border p-4
                  @min-h-[16rem]:flex @min-h-[16rem]:items-center">
    <h3 class="text-lg font-semibold">Ventas de la semana</h3>
    <p class="mt-2 text-3xl font-bold text-sky-600">12.480 €</p>
  </article>
</section>

En un dashboard, cada tarjeta adapta su disposición a la altura real que le deja su contenedor: si hay espacio, el contenido se centra en vertical; si no, se mantiene compacto. Es el tipo de layout que antes exigía JavaScript midiendo el DOM y que ahora resuelve CSS.

Conclusión

Tailwind CSS v4.3 ataca tres frentes que seguían obligando a CSS a mano: scrollbars, dimensiones verticales de contenedores y variantes compuestas. Si ya usas la v4, la actualización es indolora y las nuevas utilidades se notan en el código; si vienes de v3, la migración es el empujón definitivo. Sigue el blog para más tutoriales de CSS y desarrollo web.