Tailwind CSS provides utility classes to control whether an element responds to pointer events, such as mouse clicks, hovering, and touch interactions. These utilities correspond to the CSS pointer-events property and help control how users interact with elements on a webpage.
In CSS, this behaviour is controlled using the CSS pointer-events property.
pointer-events-auto: Allows an element to respond to pointer events according to the browser's normal behavior.pointer-events-none: Prevents an element from being the target of pointer events. The events can pass through to elements underneath it.
Syntax
<element class="pointer-events-{value}">...</element>Here, {value} can be auto or none.
Example:
<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Pointer Events</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->
<body class="min-h-screen bg-gray-100 p-8 text-center">
<h1 class="mb-2 text-3xl font-bold text-green-700">
GeeksforGeeks
</h1>
<b class="mb-6 block text-xl">
Tailwind CSS Pointer Events
</b>
<div class="mx-auto max-w-md rounded-xl border-2 border-green-800 bg-white p-6 shadow-md">
<p class="mb-4 text-gray-700">
Click the buttons to test pointer events.
</p>
<button
class="pointer-events-auto mb-4 w-full rounded-lg bg-blue-600 px-4 py-3 font-semibold text-white hover:bg-blue-700"
onclick="alert('pointer-events-auto button clicked!')">
pointer-events-auto
</button>
<button
class="pointer-events-none w-full rounded-lg bg-green-600 px-4 py-3 font-semibold text-white">
pointer-events-none
</button>
<p class="mt-4 text-sm text-gray-600">
The blue button responds to clicks, while the green button ignores pointer interactions.
</p>
</div>
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->