Tailwind CSS v4.3: Barras de desplazamiento, nuevos colores y más

Tailwind CSS v4.3 ya está aquí, y porque aparentemente lanzar v4.2 fue más fácil que acordarse de escribir un artículo en el blog sobre ello, esta publicación trata secretamente sobre las novedades de dos lanzamientos.

Esto es lo que llegó en v4.2:

• Nuevas paletas mauve, olive, mist y taupe — cuatro paletas más de tonos neutros para cuando gray, zinc, neutral, stone y slate te hayan fallado de alguna manera.
• Plugin de webpack de primer nivel — para un gran aumento de rendimiento en frameworks como Next.js.
• Más utilidades de propiedades lógicas — incluyendo pbs-*, mbs-*, inline-*, block-* y nuevas utilidades de insets lógicos.
• Nueva utilidad font-features-* — controla características de OpenType de bajo nivel sin tener que escribir CSS personalizado cada vez.

…y esto es lo nuevo en v4.3:

• Nuevas utilidades de barra de desplazamiento — diseña barras de desplazamiento sin preguntarte qué API de navegador a medio soportar deberías usar esta semana.
• Nueva utilidad @container-size — crea contenedores de tamaño para cuando tus consultas de contenedor (container queries) también necesiten tener en cuenta la altura.
• Nuevas utilidades zoom-* — usa la propiedad zoom de CSS directamente en tu marcado, ahora que todos los navegadores finalmente se han puesto de acuerdo en que existe.
• Nuevas utilidades tab-* — controla el ancho renderizado de los caracteres de tabulación, solo por favor no los hagas de ocho espacios como solía hacer GitHub.
• Soporte para @variant apilados y compuestos — usa variantes apiladas y compuestas directamente en CSS.
• Valores por defecto para utilidades funcionales — define utilidades que funcionen con o sin valor.

Muchas de las mejoras de v4.2, incluyendo las nuevas utilidades de propiedades lógicas y el soporte para font-features-*, surgieron de colaboraciones con equipos de Netflix y Vercel a través de nuestro Programa de socios. Si hay mejoras de frameworks como esta que harían que Tailwind CSS funcione mejor para tu equipo, nos encantaría ayudarte.

Actualiza tus proyectos instalando la última versión de tailwindcss desde npm:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

Nuevas paletas mauve, olive, mist y taupe

En v4.2 añadimos cuatro nuevas paletas de colores al tema predeterminado: mauve, olive, mist y taupe.

Estas surgieron originalmente de Oatmeal, el kit de sitio de marketing multitema que lanzamos para Tailwind Plus en diciembre, donde necesitábamos algunas paletas neutras más que aún se sintieran distintas de las escalas de grises que ya incluimos.

Todas están en esa útil categoría adyacente a los neutros donde quieres algo que siga comportándose como el gris, pero que tenga un poco más de personalidad:

Son un buen sustituto para las paletas de grises existentes cuando quieres que todo el diseño se incline a ser un poco más cálido, frío, verde o… ¿malva?

<div class="bg-mauve-950 text-mauve-100 ...">Mauve</div><div class="bg-olive-100 text-olive-950 ...">Olive</div><div class="border border-mist-200 shadow-taupe-950/10 ...">Mist and taupe</div>

Echa un vistazo a la documentación de colores para ver una bonita cuadrícula de todos los colores disponibles.

Plugin de webpack de primer nivel

Tailwind CSS v4.2 añadió un loader @tailwindcss/webpack dedicado para integrar Tailwind CSS en proyectos webpack.

Antes de esto, los proyectos webpack generalmente ejecutaban Tailwind a través de postcss-loader y @tailwindcss/postcss, lo cual funciona, pero significa que el CSS tiene que dar un pequeño rodeo por PostCSS solo para que Tailwind pueda procesar una cadena que ya sabe cómo compilar.

El loader dedicado evita ese trabajo adicional, y hemos visto que hace que Tailwind sea más de 2 veces más rápido en proyectos webpack grandes y complicados. Por ejemplo, esto es lo que vimos al hacer pruebas con la documentación de tailwindcss.com usando Next.js y Turbopack:

Usarlo requiere el mismo tipo de configuración al que estás acostumbrado con otros loaders de webpack:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {  plugins: [new MiniCssExtractPlugin()],  module: {    rules: [      {        test: /\.css$/i,        use: [MiniCssExtractPlugin.loader, "css-loader", "@tailwindcss/webpack"],      },    ],  },};

Debido a que Turbopack admite loaders de webpack a través de su capa de compatibilidad, estas mejoras también se trasladan allí, lo cual es muy importante para frameworks como Next.js, donde Turbopack se está convirtiendo en el estándar predeterminado.

Echa un vistazo al README de @tailwindcss/webpack para más detalles.

Más utilidades de propiedades lógicas

Tailwind CSS v4.2 añadió un montón de nuevas utilidades de propiedades lógicas, lo que facilita la creación de diseños que se adapten correctamente a diferentes modos de escritura y direcciones.

Para el espaciado, hay nuevas utilidades de inicio de bloque (block-start) e inicio de bloque final (block-end) para padding, margin, scroll padding, scroll margin y borders:

<div class="mbs-6 mbe-2 pbs-4 pbe-8 ...">  <!-- ... --></div>

<div class="scroll-mbs-4 scroll-mbe-4 scroll-pbs-12 scroll-pbe-12 ...">  <!-- ... --></div>

<div class="border-bs border-be-2 ...">  <!-- ... --></div>

También hemos añadido utilidades de tamaño lógico para inline-size y block-size, junto con variantes min y max:

<div class="block-64 inline-full max-block-screen max-inline-lg min-block-24 min-inline-0 ...">  <!-- ... --></div>

Y hemos añadido utilidades de insets lógicos para posicionar elementos:

<div class="absolute inset-s-0 inset-e-4 inset-bs-2 inset-be-8 ...">  <!-- ... --></div>

Las utilidades start-* y end-* existentes todavía están disponibles, pero ahora están obsoletas en favor de inset-s-* e inset-e-* para que toda la API se alinee con inset-bs-* e inset-be-*.

Echa un vistazo a la documentación de padding, margin, scroll-padding, scroll-margin, border-width, inline-size, block-size y top / right / bottom / left para más detalles.

Nueva utilidad font-features-*

También hemos añadido utilidades font-features-* para controlar font-feature-settings:

<div class='font-features-["tnum"] ...'>  <!-- ... --></div>

Para casos comunes como los números tabulares, deberías recurrir primero a utilidades de nivel superior como tabular-nums, porque nadie debería tener que recordar que "tnum" es una opción.

Pero cuando necesitas habilitar un conjunto estilístico específico de la fuente u otra característica de OpenType para la cual no tenemos una utilidad dedicada, font-features-* te brinda una salida limpia.

Echa un vistazo a la documentación de font-feature-settings para más detalles.

Nuevas utilidades de barras de desplazamiento

Tailwind CSS v4.3 añade utilidades integradas (first-party) para las APIs de barras de desplazamiento de CSS, para que finalmente puedas hacer lo aburrido pero útil de las barras de desplazamiento sin abrir una segunda pestaña y recordar qué navegador admite qué.

Usa scrollbar-auto, scrollbar-thin y scrollbar-none para controlar scrollbar-width:

<div class="scrollbar-thin scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

También puedes controlar los colores de la barra de desplazamiento usando las utilidades scrollbar-thumb-* y scrollbar-track-*:

<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

También funcionan con los modificadores habituales de opacidad de color:

<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">  <!-- ... --></div>

Y para evitar los cambios de diseño (layout shift) cuando aparecen las barras de desplazamiento, hemos añadido scrollbar-gutter-auto, scrollbar-gutter-stable y scrollbar-gutter-both:

<div class="scrollbar-gutter-stable overflow-auto ...">  <!-- ... --></div>

Echa un vistazo a las documentaciones de scrollbar-width, scrollbar-color y scrollbar-gutter para más detalles.

Nueva utilidad @container-size

En Tailwind CSS v4.0 añadimos soporte nativo de consultas de contenedor con la utilidad @container, la cual crea un contenedor de tamaño en línea (inline-size).

Eso es lo que quieres la mayor parte del tiempo, pero las unidades de longitud de consulta de contenedor como cqb y cqh dependen del tamaño del bloque (block size) del contenedor, y los contenedores de tamaño en línea no exponen esa información.

Así que en v4.3 hemos añadido @container-size, que crea un contenedor de tamaño completo en su lugar:

<div class="@container-size">  <div class="h-[50cqb]">    <!-- ... -->  </div></div>

También puedes nombrar contenedores de tamaño usando @container-size/{nombre}, al igual que @container/{nombre}.

Echa un vistazo a la documentación de diseño responsivo para más detalles.

Nuevas utilidades zoom-*

Tailwind CSS v4.3 añade utilidades zoom-* para la propiedad zoom de CSS, una de esas antiguas características del navegador que ya era compatible con Chrome 1 en 2008, pero que solo llegó a tener soporte completo en todos los navegadores principales en 2024 después de tomar la ruta panorámica a través de algunos errores de SVG de larga data:

<div class="zoom-75 ...">Con zoom alejado</div><div class="zoom-100 ...">Normal</div><div class="zoom-125 ...">Con zoom acercado</div>

También puedes usar valores arbitrarios y variables CSS:

<div class="zoom-[1.1] ...">Con un poco de zoom</div><div class="zoom-(--preview-zoom) ...">Zoom usando una variable</div>

Echa un vistazo a la documentación de zoom para más detalles.

Nuevas utilidades tab-*

También hemos añadido utilidades tab-* para controlar el ancho renderizado de los caracteres de tabulación usando tab-size.

Esto es principalmente útil para ejemplos de código, editores y cualquier otra interfaz de usuario donde estés renderizando texto preformateado que pueda contener caracteres de tabulación reales:

function indent() {	return 'tabbed';}

function indent() {	return 'tabbed';}

<pre class="tab-2 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre><pre class="tab-8 ...">function indent() {&#10;&#9;return 'tabbed'&#10;}</pre>

Los valores arbitrarios y las variables CSS también funcionan aquí:

<pre class="tab-[12px] ...">...</pre><pre class="tab-(--tab-size) ...">...</pre>

Echa un vistazo a la documentación de tab-size para más detalles.

Soporte para @variant apilados y compuestos

Tailwind CSS v4.3 hace que @variant sea más flexible cuando estás usando variantes en CSS en lugar de hacerlo directamente en tu marcado.

Ahora puedes usar variantes apiladas:

.button {  background: var(--color-sky-500);  @variant hover:focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      &:focus {        background: var(--color-sky-600);      }    }  }}

And you can use compound variants to share the same block of CSS across multiple variants:

.button {  background: var(--color-sky-500);  @variant hover, focus {    background: var(--color-sky-600);  }}

.button {  background: var(--color-sky-500);  &:hover {    @media (hover: hover) {      background: var(--color-sky-600);    }  }  &:focus {    background: var(--color-sky-600);  }}

Normalmente es mejor crear un componente real y darle estilo con clases de Tailwind CSS directamente, pero cuando CSS es la herramienta adecuada, esto hace que sea mucho más agradable trabajar con @variant.

Echa un vistazo a la documentación de @variant para más detalles.

Valores por defecto para utilidades funcionales

Tailwind CSS v4.0 introdujo las definiciones funcionales de @utility, donde puedes usar --value(…) y --modifier(…) para definir utilidades que acepten valores del tema, valores simples, valores arbitrarios y modificadores.

En v4.3, ahora puedes pasar --default(…) a --value(…) y --modifier(…) cuando una utilidad deba funcionar con o sin valor:

@utility tab-* {  tab-size: --value(integer, --default(4));}

Ahora la utilidad simple tab puede recurrir a 4, mientras que tab-2 todavía se resuelve como 2:

<pre class="tab ...">...</pre><pre class="tab-2 ...">...</pre>

.tab {  tab-size: 4;}.tab-2 {  tab-size: 2;}

Eso facilita la definición de APIs donde la utilidad simple hace lo obvio, mientras que se siguen admitiendo valores explícitos para la misma familia de utilidades.

Es un detalle pequeño, pero permite a los autores de plugins y a cualquiera que escriba utilidades personalizadas crear APIs que se sientan mucho más parecidas a las que incluimos en el propio framework.

¡Así que eso es Tailwind CSS v4.2 y v4.3!

Actualiza a la última versión usando npm y empieza a jugar con ella hoy mismo:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

npm install tailwindcss@latest @tailwindcss/webpack@latest

Prueba las novedades y cuéntanos con qué te encuentras. Solo recuerda que un tamaño de tabulación superior a 4 es un crimen y puede resultar en la suspensión de tu licencia de ingeniería de software.