Cursor
Utilities for controlling the mouse cursor shown when the pointer is over an element on web and desktop targets.
On this page
Basic Usage#
cursor-* maps a Tailwind cursor name to the matching native cursor and applies it through a MouseRegion. A plain WDiv can show a pointer cursor without being wrapped in WAnchor or a manual MouseRegion.
interactivity/cursor_basic
The live demo is not available for this example.
cursor_basic.dart
View source
// A clickable-feeling row without WAnchor
WDiv(
className: 'cursor-pointer px-4 py-3 rounded-lg bg-blue-500 dark:bg-blue-600',
child: WText('Click me', className: 'text-white'),
)
The cursor is a hover affordance only; it changes how the pointer looks, not how taps are handled. Wire taps through WAnchor / WButton as usual.
Quick Reference#
| Class | Flutter cursor |
|---|---|
cursor-auto / cursor-default |
SystemMouseCursors.basic |
cursor-pointer |
SystemMouseCursors.click |
cursor-wait |
SystemMouseCursors.wait |
cursor-progress |
SystemMouseCursors.progress |
cursor-text |
SystemMouseCursors.text |
cursor-vertical-text |
SystemMouseCursors.verticalText |
cursor-move |
SystemMouseCursors.move |
cursor-help |
SystemMouseCursors.help |
cursor-not-allowed |
SystemMouseCursors.forbidden |
cursor-none |
SystemMouseCursors.none |
cursor-context-menu |
SystemMouseCursors.contextMenu |
cursor-cell |
SystemMouseCursors.cell |
cursor-crosshair |
SystemMouseCursors.precise |
cursor-alias |
SystemMouseCursors.alias |
cursor-copy |
SystemMouseCursors.copy |
cursor-no-drop |
SystemMouseCursors.noDrop |
cursor-grab |
SystemMouseCursors.grab |
cursor-grabbing |
SystemMouseCursors.grabbing |
cursor-all-scroll |
SystemMouseCursors.allScroll |
cursor-col-resize |
SystemMouseCursors.resizeColumn |
cursor-row-resize |
SystemMouseCursors.resizeRow |
cursor-n-resize / cursor-e-resize / cursor-s-resize / cursor-w-resize |
resizeUp / resizeRight / resizeDown / resizeLeft |
cursor-ne-resize / cursor-nw-resize / cursor-se-resize / cursor-sw-resize |
resizeUpRight / resizeUpLeft / resizeDownRight / resizeDownLeft |
cursor-ew-resize / cursor-ns-resize |
resizeLeftRight / resizeUpDown |
cursor-nesw-resize / cursor-nwse-resize |
resizeUpRightDownLeft / resizeUpLeftDownRight |
cursor-zoom-in / cursor-zoom-out |
zoomIn / zoomOut |
Flutter has no "auto" cursor, so cursor-auto resolves to the same basic arrow as cursor-default.
How It Works#
WDiv wraps its content in a MouseRegion when a cursor-* token is present. When the WDiv also carries hover: / focus: / active: classes it is already wrapped in WAnchor (whose MouseRegion uses click only when the anchor has gesture callbacks, otherwise basic); the cursor-* MouseRegion sits deeper in the tree, so its cursor wins for the area it covers regardless of the anchor's default. Last token wins: cursor-pointer cursor-text resolves to text.
Cursors are a no-op on touch platforms (there is no pointer to style); the token is simply inert there.
Responsive Design#
Combine cursor-* with breakpoint prefixes to change the affordance per viewport.
WDiv(className: 'cursor-default md:cursor-pointer')
Dark Mode#
The cursor itself is theme-independent, but pair the surrounding color tokens with their dark: peers as usual.
WDiv(className: 'cursor-pointer bg-white dark:bg-gray-800')
Related Documentation#
- WAnchor: exposes a
mouseCursorconstructor prop for fully imperative control. - Transitions: smooth state changes on hover.