Tailwind CSS Pointer Events Cheatsheet
Control whether elements respond to pointer interactions.
Interactive demos show each behavior. Click to copy class names.
Pointer Events Utilities
Tailwind provides two utilities to control pointer event behavior.
Interactive Demos
See pointer events utilities in action
pointer-events-none - Interactive Demo
The overlay ignores all clicks - try clicking the button through it.
With pointer-events-none overlay
Clicks pass through the overlay to the button
Without pointer-events-none
Overlay intercepts all clicks
<!-- Overlay that allows clicks through -->
<div class="relative">
<button>Clickable button</button>
<div class="absolute inset-0 pointer-events-none">
Decorative overlay
</div>
</div>pointer-events-auto - Creating Click Holes
Use pointer-events-auto on children to restore interactivity within a pointer-events-none parent.
Background content area
Overlay (pointer-events-none)
Click an element
<!-- Click hole in overlay -->
<div class="relative">
<button>Background button (blocked)</button>
<div class="absolute inset-0 pointer-events-none">
<p>Overlay content</p>
<button class="pointer-events-auto">
This button is clickable!
</button>
</div>
</div>Disabled Button States
Combine pointer-events-none with visual styling for proper disabled states.
Normal Button
Fully interactive
Visual Only
Looks disabled, but works
Truly Disabled
Cannot be clicked
<!-- Visual disabled only (still clickable!) --> <button class="opacity-50 cursor-not-allowed"> Looks disabled </button> <!-- Truly disabled (no interaction) --> <button class="opacity-50 cursor-not-allowed pointer-events-none"> Cannot interact </button> <!-- Or use the disabled attribute --> <button disabled class="disabled:opacity-50 disabled:cursor-not-allowed"> Native disabled </button>
Watermark Overlay Pattern
Create watermarks that don't block user interaction with content.
PREVIEW
Use case: Document previews, image watermarks, draft indicators, and decorative elements that shouldn't interfere with user interaction.
Loading Overlay Pattern
Block interactions during loading states (this is the opposite - we want to block clicks).
<!-- Loading overlay that BLOCKS interaction -->
{isLoading && (
<div class="absolute inset-0 bg-base-100/80">
<Spinner />
{/* NO pointer-events-none here! */}
</div>
)}
<!-- Pass-through overlay for visual only -->
<div class="absolute inset-0 pointer-events-none">
Decorative overlay
</div>Common Patterns
Decorative Overlay
<div class="relative">
<img src="photo.jpg" />
<div class="absolute inset-0
bg-gradient-to-t from-black/50
pointer-events-none">
<span>Caption text</span>
</div>
</div>Icon Inside Input
<div class="relative">
<input type="text" class="pr-10" />
<span class="absolute right-3 top-1/2
-translate-y-1/2 pointer-events-none">
<SearchIcon />
</span>
</div>Disabled with Tooltip
<div class="relative group">
<button class="pointer-events-none
opacity-50">
Disabled
</button>
{/* Tooltip can still show */}
<span class="absolute opacity-0
group-hover:opacity-100
pointer-events-none">
Feature not available
</span>
</div>Click-through Modal Backdrop
{/* Backdrop passes clicks */}
<div class="fixed inset-0 bg-black/20
pointer-events-none" />
{/* Modal catches clicks */}
<dialog class="pointer-events-auto">
Modal content
</dialog>Floating Labels
<div class="relative">
<input type="text" id="email" />
<label for="email"
class="absolute left-3 top-2
pointer-events-none
transition-all">
Email address
</label>
</div>SVG Background Pattern
<div class="relative">
<main>Interactive content</main>
<svg class="absolute inset-0 w-full h-full
pointer-events-none opacity-5">
<pattern>...</pattern>
</svg>
</div>Quick Reference Table
| Class | CSS | Use For |
|---|---|---|
pointer-events-none | pointer-events: none; | Overlays, watermarks, decorative elements, disabled states |
pointer-events-auto | pointer-events: auto; | Re-enable interaction on children, click holes in overlays |
Remember: pointer-events only affects mouse/touch events. For complete disabled behavior including keyboard, use the native disabled attribute on form elements.
Frequently Asked Questions
What does pointer-events-none do in Tailwind CSS?
pointer-events-none makes an element completely ignore all mouse/touch events. Clicks, hovers, and other pointer interactions pass through to elements behind it. This is useful for decorative overlays, watermarks, and visual elements that shouldn't block interaction.
When should I use pointer-events-auto in Tailwind?
Use pointer-events-auto to restore pointer interactivity to an element or its children when a parent has pointer-events-none. This creates 'click holes' in overlays where specific elements remain clickable while the rest passes through.
How do I make a button look disabled but still clickable?
To make a button appear disabled while remaining clickable, add visual styling like opacity-50 and cursor-not-allowed without adding pointer-events-none. If the button should be truly non-interactive, combine these with pointer-events-none or use the native disabled attribute.
Can I make an overlay that allows clicks to pass through?
Yes! Add pointer-events-none to the overlay element. All pointer events will pass through to elements behind it. To make specific parts of the overlay clickable, add pointer-events-auto to those children.
Does pointer-events-none affect keyboard navigation?
No, pointer-events-none only affects mouse and touch events. Elements can still receive keyboard focus and be activated via Enter/Space. For true disabled behavior, also use tabindex='-1' or the native disabled attribute.
What's the difference between pointer-events-none and visibility-hidden?
pointer-events-none keeps the element visible but makes it non-interactive. visibility-hidden hides the element completely while maintaining its space in the layout. Use pointer-events-none when you want users to see but not interact with an element.
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow