Sometimes you don’t want your users to copy some text from your web page. This is very useful when you don’t want visitors to steal your hard work.
How to Disable Text Selection in TailwindCSS
In TailwindCSS, you can utilize the select
class with none
modifier to disable the selection of text. This will stop people from copying text from your website. Here is a simple example with a working demo online.
1 2 3 4 5 6 7 8 9 |
<div class="flex h-screen justify-center items-center flex-col text-white bg-blue-700 text-2xl"> <p class="select-none max-w-xl "> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint aspernatur repellat, maiores iure delectus quos? Exercitationem earum, adipisci voluptatibus error quos maiores nemo soluta, sequi distinctio quaerat cupiditate? Ut, rerum. </p> </div> |
Conclusion
You can disable text selection from your website with TailwindCSS. The select-none
class helps you disable text selection from a specific paragraph or page. You can use select
with different modifiers as well. TailwindCSS also provides a way to change selected text background which is useful in many situations.