Interactivity

Cursor

sz prop	Tailwind class
{ cursor: 'auto' }	cursor-auto
{ cursor: 'default' }	cursor-default
{ cursor: 'pointer' }	cursor-pointer
{ 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
{ cursor: 'zoom-in' }	cursor-zoom-in
{ cursor: 'none' }	cursor-none

cursor variants — hover each to see the cursor change

Pointer Events

sz prop	Tailwind class
{ pointerEvents: 'none' }	pointer-events-none
{ pointerEvents: 'auto' }	pointer-events-auto

User Select

sz prop	Tailwind class
{ select: 'none' }	select-none
{ select: 'text' }	select-text
{ select: 'all' }	select-all
{ select: 'auto' }	select-auto

user-select — none vs text (try selecting the text)

select-none (not selectable)

select-text (selectable)

Resize

sz prop	Tailwind class
{ resize: true }	resize
{ resize: 'none' }	resize-none
{ resize: 'x' }	resize-x
{ resize: 'y' }	resize-y

{ resize: 'y' } — vertically resizable textarea

Drag the corner to resize vertically.

Scroll Behavior

sz prop	Tailwind class
{ scroll: 'smooth' }	scroll-smooth
{ scroll: 'auto' }	scroll-auto
{ scrollMt: 4 }	scroll-mt-4
{ scrollPt: 4 }	scroll-pt-4
{ scrollPx: 4 }	scroll-px-4
{ scrollPy: 4 }	scroll-py-4
{ overscroll: 'none' }	overscroll-none
{ overscroll: 'contain' }	overscroll-contain

Scroll Snap

sz prop	Tailwind class
{ snapType: 'x' }	snap-x
{ snapType: 'y' }	snap-y
{ snapType: 'both' }	snap-both
{ snapType: 'none' }	snap-none
{ snapStrictness: 'mandatory' }	snap-mandatory
{ snapStrictness: 'proximity' }	snap-proximity
{ snapAlign: 'start' }	snap-start
{ snapAlign: 'center' }	snap-center
{ snapAlign: 'end' }	snap-end
{ snapStop: 'always' }	snap-always

Touch Action

sz prop	Tailwind class
{ touch: 'none' }	touch-none
{ touch: 'pan-x' }	touch-pan-x
{ touch: 'pan-y' }	touch-pan-y
{ touch: 'auto' }	touch-auto

Appearance

sz prop	Tailwind class
{ appearance: 'none' }	appearance-none
{ appearance: 'auto' }	appearance-auto
{ caret: 'auto' }	caret-auto
{ caret: 'blue-500' }	caret-blue-500
{ accent: 'blue-500' }	accent-blue-500

Color Scheme

sz prop	Tailwind class
{ scheme: 'dark' }	scheme-dark
{ scheme: 'light' }	scheme-light
{ scheme: 'light-dark' }	scheme-light-dark
{ scheme: 'only-dark' }	scheme-only-dark
{ scheme: 'normal' }	scheme-normal

Field Sizing

sz prop	Tailwind class
{ fieldSizing: 'content' }	field-sizing-content
{ fieldSizing: 'fixed' }	field-sizing-fixed

Will Change

sz prop	Tailwind class
{ willChange: 'auto' }	will-change-auto
{ willChange: 'transform' }	will-change-transform
{ willChange: 'opacity' }	will-change-[opacity]

Examples

// Disabled button
<button sz={{
  cursor: 'not-allowed',
  opacity: 50,
  pointerEvents: 'none',
}} />

// Smooth scroll container
<div sz={{
  overflowY: 'auto',
  scroll: 'smooth',
  scrollMt: 4,
}} />

// Horizontal snap carousel
<div sz={{
  flex: true,
  overflow: 'hidden',
  snapType: 'x',
  snapStrictness: 'mandatory',
}}>
  <div sz={{ shrink: 0, w: 'full', snapAlign: 'center' }} />
  <div sz={{ shrink: 0, w: 'full', snapAlign: 'center' }} />
</div>

// Text not selectable
<p sz={{ select: 'none', cursor: 'default' }}>
  Not selectable
</p>