Modifiers with when()

when() is the functional modifier API. Most users will prefer the tw chainable API where modifiers are properties (tw.hover.bg(...)) or functions (tw.hover(tw.bg(...))).

Use when() when working with cx() directly.

Syntax

import { cx, bg, when, hover } from 'typewritingclass'

cx(when(hover)(bg('blue-600')))
// CSS: ._abc:hover { background-color: #2563eb; }

Multiple rules

cx(when(hover)(bg('blue-600'), shadow('lg'), textColor('white')))

Composing modifiers

cx(when(dark, hover)(bg('blue-400')))
// dark mode + hover: both conditions must be true

Available modifiers

Pseudo-states: hover, focus, active, disabled, focusVisible, focusWithin, firstChild, lastChild

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), _2xl (1536px)

Color scheme: dark

Group/Peer: groupHover, groupFocus, peerFocus, peerInvalid, and more

Partial application

const onDarkHover = when(dark, hover)
cx(textColor('blue-600'), onDarkHover(textColor('blue-300')))