Selección de usuario de Tailwind CSS

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como un formulario de clase. Esta clase se utiliza para especificar si el texto puede ser seleccionado por el usuario o no. En CSS, lo hacemos usando la propiedad de selección de usuario de CSS

Clases de selección de usuario

  • select-none: Esta clase se utiliza para denegar la selección de cualquier texto.
  • select-text: esta clase se utiliza para seleccionar un solo texto.
  • select-all: esta clase se utiliza para seleccionar la instrucción completa.
  • select-auto: esta clase se utiliza para establecer el comportamiento predeterminado.

Sintaxis:

<element class="select-{effect}">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
    rel="stylesheet"/> 
</head> 
  
<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
    GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS User Select Class</b> 
    <div class="mx-14 bg-green-200 grid grid-rows-2
                grid-flow-col text-justify p-2 gap-2"> 
    <p class="bg-green-400 p-2 select-none"> 
        User Select: select-none
    </p>
   
  
    <p class="bg-yellow-400 p-2 select-text"> 
        User Select: select-text     
    </p>
   
  
    <p class="bg-purple-400 p-2 select-all"> 
        User Select: select-all
    </p>
   
  
    <p class="bg-blue-800 p-2 select-auto"> 
        User Select: select-auto 
    </p>
   
  
    </div> 
</body> 
</html> 

Producción:

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *