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=
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:
Share your thoughts in the comments
Please Login to comment...