cursor

Ejemplos

Ejemplo básico

Usa utilidades como cursor-pointer y cursor-grab para controlar qué cursor se muestra al pasar el ratón sobre un elemento:

<button class="cursor-pointer ...">Submit</button>
<button class="cursor-progress ...">Saving...</button>
<button class="cursor-not-allowed ..." disabled>Confirm</button>

Usando un valor personalizado

Usa la sintaxis cursor-[<value>] para establecer el cursor basado en un valor completamente personalizado:

<button class="cursor-[url(hand.cur),_pointer] ...">
  <!-- ... -->
</button>

Para variables CSS, también puedes usar la sintaxis cursor-(<custom-property>) :

<button class="cursor-(--my-cursor) ...">
  <!-- ... -->
</button>

Esto es solo un atajo para cursor-[var(<custom-property>)] que agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad cursor con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<button class="cursor-not-allowed md:cursor-auto ...">
  <!-- ... -->
</button>

Aprende más sobre el uso de variantes en la documentación de variantes.