How to Prevent Users from Selecting Text with Plain CSS or Tailwind

Sometimes when you’re building a website, you may not want users to highlight text, like on buttons, icons, or interactive elements.

Luckily, CSS makes this super easy to do.

The Simple CSS Solution

Here’s the magic trick I use:

.my-element {
  user-select: none;
}

That’s it! Just add user-select: none; to whatever text you want to make unselectable, and you’re good to go.

If you’re aiming for maximum browser compatibility (especially for older browsers), you can add vendor prefixes like this:

.my-element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

But these days, the plain user-select: none; works perfectly fine in modern browsers.

What About Tailwind CSS?

If you’re using Tailwind CSS, as I do, there’s no need to write any custom CSS. You can simply use the select-none utility class:

<button class="select-none">Click Me</button>

And that’s it! Tailwind takes care of the rest for you.

That’s a Wrap

I hope this post has helped you out.

If you're interested in my web design services or templates, want to collaborate, or just have something to say, feel free to shoot me a message.