user-select

Ejemplos

Deshabilitando la selección de texto

Usa la utilidad select-none para evitar la selección de texto en un elemento y sus hijos:

<div class="select-none ...">El rápido zorro marrón salta sobre el perro perezoso.</div>

Permitiendo la selección de texto

Usa la utilidad select-text para permitir la selección de texto en un elemento y sus hijos:

<div class="select-text ...">El rápido zorro marrón salta sobre el perro perezoso.</div>

Seleccionando todo el texto con un clic

Usa la utilidad select-all para seleccionar automáticamente todo el texto en un elemento cuando un usuario hace clic:

<div class="select-all ...">El rápido zorro marrón salta sobre el perro perezoso.</div>

Usando el comportamiento de selección automático

Usa la utilidad select-auto para usar el comportamiento predeterminado del navegador para seleccionar texto:

<div class="select-auto ...">El rápido zorro marrón salta sobre el perro perezoso.</div>

Responsive design

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

<div class="select-none md:select-all ...">
  <!-- ... -->
</div>

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