Sling Academy
Home/Tailwind CSS/Tailwind CSS: How to Disable Text Selection

Tailwind CSS: How to Disable Text Selection

Last updated: December 09, 2023

When developing websites, disabling text selection can protect your content, improve your design, or control your functionality. However, this can also frustrate your users, reduce your accessibility, or be bypassed by other methods. Therefore, you should weigh the pros and cons of disabling text selection for your website.

In Tailwind CSS, you can prevent text from being selected by using the select-none utility class. Let’s see the example below for more clarity.

Preview:

The code:

<body class="bg-green-200 p-20 space-y-3">
    <p class="text-xl text-blue-500">This text is selectable</p>
    <p class="select-none text-xl italic text-red-500">This text is unselectable</p>
</body>

That’s it. Happy coding & have a nice day!

Previous Article: Text Underline in Tailwind CSS

Series: Styling Text & Images with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • How to Create Pill Buttons with Tailwind CSS
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)