Skip to content
Related Articles

Related Articles

Tailwind CSS User Select

Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
Improve Article
Save Article

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.


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



<!DOCTYPE html> 
    <link href
<body class="text-center mx-4 space-y-2"
    <h1 class="text-green-600 text-5xl font-bold"
    <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 class="bg-yellow-400 p-2 select-text"
        User Select: select-text     
    <p class="bg-purple-400 p-2 select-all"
        User Select: select-all
    <p class="bg-blue-800 p-2 select-auto"
        User Select: select-auto 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!