Effects

Shadow

Class	CSS
chai-shadow	medium drop shadow
chai-shadow-none	box-shadow: none
chai-shadow-sm	small
chai-shadow-md	medium
chai-shadow-lg	large
chai-shadow-xl	extra-large
chai-shadow-2xl	dramatic
chai-shadow-inner	inset
chai-shadow-[0_4px_24px_rgba(0,0,0,.15)]	arbitrary

The named scale lives in the theme and can be overridden.

Opacity

Class	CSS
chai-opacity-0	opacity: 0
chai-opacity-25	opacity: 0.25
chai-opacity-50	opacity: 0.5
chai-opacity-75	opacity: 0.75
chai-opacity-100	opacity: 1
chai-opacity-[0.4]	arbitrary

The numeric form is 0–100; arbitrary values pass through verbatim.

Cursor

Class	CSS
chai-cursor-pointer	cursor: pointer
chai-cursor-default	cursor: default
chai-cursor-wait	cursor: wait
chai-cursor-text	cursor: text
chai-cursor-not-allowed	cursor: not-allowed
chai-cursor-grab	cursor: grab
chai-cursor-[help]	arbitrary

Whatever follows cursor- is passed straight through, so any valid CSS cursor keyword works.

Pointer events & selection

Class	CSS
chai-pointer-events-none	pointer-events: none
chai-pointer-events-auto	pointer-events: auto
chai-select-none	user-select: none
chai-select-text	user-select: text
chai-select-all	user-select: all
chai-select-auto	user-select: auto