Tailwind Cursor, Select, and Pointer Events to CSS
Convert Tailwind cursor-pointer, select-none, pointer-events-none, resize, appearance-none classes to CSS. Handle user interaction styling.
Interactivity
Detailed Explanation
Tailwind Interactivity Utilities in CSS
Tailwind provides a set of utility classes for controlling how users interact with elements. These map to CSS properties like cursor, user-select, pointer-events, resize, and appearance.
Cursor
/* cursor-pointer */
cursor: pointer;
/* cursor-default */
cursor: default;
/* cursor-wait */
cursor: wait;
/* cursor-text */
cursor: text;
/* cursor-move */
cursor: move;
/* cursor-not-allowed */
cursor: not-allowed;
/* cursor-grab */
cursor: grab;
/* cursor-grabbing */
cursor: grabbing;
User Select
/* select-none (prevent text selection) */
user-select: none;
/* select-text */
user-select: text;
/* select-all */
user-select: all;
/* select-auto */
user-select: auto;
Pointer Events
/* pointer-events-none (click-through) */
pointer-events: none;
/* pointer-events-auto */
pointer-events: auto;
Resize
/* resize-none */
resize: none;
/* resize (both directions) */
resize: both;
/* resize-x */
resize: horizontal;
/* resize-y */
resize: vertical;
Appearance
/* appearance-none (remove browser default styling) */
appearance: none;
Common Patterns
- Disabled button:
cursor-not-allowed opacity-50 pointer-events-none - Drag handle:
cursor-grab active:cursor-grabbing - Non-selectable UI text:
select-none - Overlay with click-through:
pointer-events-none - Custom select input:
appearance-nonewith custom styling
Use Case
Developers building custom form controls or drag-and-drop interfaces who need the CSS equivalents of Tailwind's interactivity classes, or teams writing accessibility-friendly CSS that matches Tailwind's cursor and selection behavior.