scrollbar-color

Ejemplos

Establecer el color de la barra de desplazamiento

Utiliza utilidades como scrollbar-thumb-sky-700 y scrollbar-track-sky-100 para controlar los colores de una barra de desplazamiento:

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

Puedes establecer los colores de la barra (thumb) y de la pista (track) de forma independiente. Si estableces uno sin el otro, el color no configurado tiene como valor predeterminado transparent.

Cambiar la opacidad

Utiliza el modificador de opacidad de color para controlar la opacidad de los colores de la barra de desplazamiento de un elemento:

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

Uso de un valor personalizado

Utiliza utilidades como scrollbar-thumb-[<value>] y scrollbar-track-[<value>] para establecer los colores de la barra de desplazamiento basándote en valores completamente personalizados:

<div class="scrollbar-thumb-[#0f766e] scrollbar-track-[#ccfbf1] ...">  <!-- ... --></div>

Para variables CSS, también puedes utilizar la sintaxis scrollbar-thumb-(<custom-property>) y scrollbar-track-(<custom-property>):

<div class="scrollbar-thumb-(--my-scrollbar-thumb) scrollbar-track-(--my-scrollbar-track) ...">  <!-- ... --></div>

Aplicar al pasar el cursor (hover)

Antepone a la utilidad scrollbar-color el prefijo de una variante como hover:* para aplicar la utilidad únicamente en ese estado:

<div class="scrollbar-thumb-sky-700 hover:scrollbar-thumb-sky-500 ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Diseño responsivo

Antepone a la utilidad scrollbar-color el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:

<div class="scrollbar-thumb-slate-900 scrollbar-track-slate-200 md:scrollbar-thumb-sky-700 ...">  <!-- ... --></div>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Personalizar el tema

Usa las variables de tema --color-* para personalizar las utilidades de color en tu proyecto:

@theme {  --color-regal-blue: #243c5a; }

Ahora se pueden usar utilidades como scrollbar-thumb-regal-blue y scrollbar-track-regal-blue en tu marcado:

<div class="scrollbar-thumb-regal-blue">  <!-- ... --></div>

Obtén más información sobre cómo personalizar tu tema en la documentación del tema.