Tailwind CSS User Select
This class accepts lots of value in tailwind CSS in which all the properties are covered as a class form. This class is used to specify whether the text can be selected by the user or not. In CSS, we do that by using the CSS user-select property.
User Select classes
- select-none: This class is used to deny the selection of any text.
- select-text: This class is used to select single text.
- select-all: This class is used to select the whole statement.
- select-auto: This class is used to set the default behavior.
Syntax:
<element class="select-{effect}">...</element>
Example:
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> |
Output:
Please Login to comment...