Skip to content
Related Articles

Related Articles

Improve Article

Tailwind CSS User Select

  • Last Updated : 12 Mar, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :