Tailwind 4.3: scrollbar, zoom y tab — tres áreas que dejas de tocar con CSS custom

Hay propiedades CSS que se usan poco pero, cuando se necesitan, obligan a romper el flujo de trabajo de Tailwind: añadir un @apply, escribir un bloque de CSS suelto o aceptar que el componente lleve estilos fuera del sistema. Tailwind v4.3 trae tres bloques de utilidades nuevas que cubren tres de esos casos recurrentes: scrollbar, zoom y tab.

Ninguno sustituye nada que existiera antes. Son utilidades completamente nuevas para propiedades CSS que sí existían pero que no tenían atajo en Tailwind. Esto es importante a la hora de decidir qué adoptar: no hay nada que migrar, solo cosas que dejas de hacer a mano.

Scrollbar

Dos bloques de utilidades relacionados.

Ancho del scrollbar (scrollbar-*)

<div class="scrollbar-thin overflow-auto">...</div>

Color del scrollbar (scrollbar-thumb-* y scrollbar-track-*)

Aceptan cualquier color del tema más variantes de opacidad. La combinación genera scrollbar-color:

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

CSS resultante:

scrollbar-width: thin;
scrollbar-color: rgb(3, 102, 214) rgb(240, 249, 255);

scrollbar-gutter-*

Resuelve el problema clásico del layout shift cuando aparece o desaparece el scrollbar:

<div class="scrollbar-gutter-stable overflow-auto">
  <!-- la anchura reservada para el scrollbar se mantiene
       aunque el contenido aún no haga overflow -->
</div>

Dónde lo notarás: en sidebars, modales y panels que aparecen y desaparecen contenido. Cuando aplicas scrollbar-gutter-stable, el contenido no se mueve un par de píxeles cada vez que el scroll se activa.

Zoom

<div class="zoom-75">Reducido al 75%</div>
<div class="zoom-100">Tamaño normal</div>
<div class="zoom-125">Aumentado al 125%</div>
<div class="zoom-[1.1]">Valor arbitrario</div>
<div class="zoom-(--preview-zoom)">Variable CSS</div>

CSS generado: zoom: 0.75 | 1 | 1.25.

Nota importante sobre soporte de navegador: la propiedad CSS zoom solo tiene soporte universal en navegadores recientes (desde 2024). Si necesitas compatibilidad con versiones anteriores, sigue siendo más seguro usar transform: scale(). Para uso interno (paneles de admin, previews dentro del builder, modos focus) está perfecto. Para frontend público con audiencia amplia, evalúa primero.

Casos típicos: vistas previas en miniatura, modos zoom de panel de admin, efectos de hover con escalado real (no scale() que solo afecta visualmente).

Tab

<pre class="tab-2">
function indent() {
  return 'dos espacios'
}
</pre>

<pre class="tab-8">tabulación amplia</pre>

<pre class="tab-[12px]">valor arbitrario en px</pre>

<pre class="tab-(--tab-size)">desde variable CSS</pre>

CSS generado: tab-size: 2 | 8 | 12px | var(--tab-size).

Dónde lo notarás: bloques <pre> con código que mezcla tabuladores y espacios. Sin este control, el navegador asume 8 espacios por tab y los snippets quedan con sangrías exageradas. Con tab-2 o tab-4 el código se ve como el lector espera.

Lo que esto cambia en la práctica

Las tres áreas tienen algo en común: son utilidades que un proyecto puede pasar mucho tiempo sin necesitar, pero cuando aparece el caso, antes había dos caminos —escribir CSS suelto o usar @apply— y ninguno era limpio dentro del sistema. Ahora salen de fábrica.

Para componentes de UI cuidados —especialmente paneles de admin, modales con scroll, vistas con previsualizaciones, bloques de documentación con código— estas utilidades reducen la fricción del "uso este atajo o salgo del sistema". Sigue siendo class="" y suma una línea al markup en vez de un bloque CSS aparte.

El criterio para adoptarlas es directo: cuando aparezca el caso. No hay urgencia de migración porque no sustituyen nada. Solo se trata de saber que ya están disponibles para no escribir CSS custom la próxima vez.