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