Tailwind CSS User Select

Last Updated : 23 Mar, 2022

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:

Tailwind CSS Fill

skyridetim

Improve

Article Tags :

Tailwind CSS User Select

Similar Reads

Tailwind CSS Layout

Tailwind CSS Flexbox

Tailwind CSS Grid

Tailwind CSS Alignment

Tailwind CSS Spacing

Tailwind CSS Sizing

Tailwind CSS Typography

Tailwind CSS Backgrounds

Thank You!

What kind of Experience do you want to share?