Responsive Design

Write base styles first (mobile), then add breakpoint modifiers for larger screens.

With tw

import { tw } from 'typewritingclass'

tw.p(4).md.p(8).lg.p(12)
tw.grid(1).md.grid(2).lg.grid(3)
tw.text.sm.md.text.lg

For multiple responsive utilities, use function syntax:

tw.p(4).md(tw.p(8).gap(6)).lg(tw.p(12).gap(8))

Breakpoints

Modifier	Min Width
sm	640px
md	768px
lg	1024px
xl	1280px
_2xl	1536px

Combining with other modifiers

tw.bg('white').md(tw.hover(tw.bg('blue-50')))
tw.p(4).md.p(8).dark(tw.bg('slate-900'))

Responsive hiding

tw.display.none.md.display.block  // hidden on mobile, visible on tablet+
tw.display.block.lg.display.none  // visible on mobile, hidden on desktop

With cx() + when()

import { cx, p, grid, gap, when, md, lg } from 'typewritingclass'

cx(p(4), grid(1), gap(4), when(md)(grid(2), p(6)), when(lg)(grid(3), p(8)))