Cursor, Scroll & Tables in Tailwind CSS

From the Tailwind CSS cheat sheet · Interactivity & Accessibility · verified Jul 2026

Cursor, Scroll & Tables

Interactive behavior, scroll snap, and table styling.

html

<!-- Cursor -->
<button class="cursor-pointer">Clickable</button>
<div class="cursor-not-allowed opacity-50">Disabled</div>
<div class="cursor-grab active:cursor-grabbing">Drag me</div>

<!-- Scroll behavior -->
<div class="scroll-smooth">Smooth scrolling</div>
<div class="overflow-y-auto scrollbar-thin">Custom scrollbar</div>

<!-- Screen reader only -->
<span class="sr-only">Accessible label</span>

💡 sr-only hides content visually but keeps it accessible to screen readers

⚡ snap-x + snap-mandatory creates swipeable carousels without JavaScript

📌 scroll-mt-16 offsets anchor scroll targets — essential when you have a fixed header

🟢 accent-blue-500 styles native checkboxes and range inputs — no custom CSS needed

cursorscrollaccessibilitytablessvg

Back to the full Tailwind CSS cheat sheet