Presets

Import from responsive-media/presets or from the main entry point.

ResponsiveConfig (default)

Key	Range
mobile	≤ 600px
tablet	601 – 960px
desktop	≥ 961px

TailwindPreset + TailwindOrder

Mutually exclusive Tailwind CSS v3/v4 breakpoints:

Key	Range
xs	≤ 639px
sm	640 – 767px
md	768 – 1023px
lg	1024 – 1279px
xl	1280 – 1535px
2xl	≥ 1536px

import { createResponsiveState, TailwindPreset, TailwindOrder } from 'responsive-media'

const state = createResponsiveState(TailwindPreset, { order: [...TailwindOrder] })

BootstrapPreset + BootstrapOrder

Mutually exclusive Bootstrap 5 breakpoints:

Key	Range
xs	≤ 575px
sm	576 – 767px
md	768 – 991px
lg	992 – 1199px
xl	1200 – 1399px
xxl	≥ 1400px

import { createResponsiveState, BootstrapPreset, BootstrapOrder } from 'responsive-media'

const state = createResponsiveState(BootstrapPreset, { order: [...BootstrapOrder] })

AccessibilityPreset

User-preference media queries. Multiple keys can be true simultaneously.

Key	Matches when …
dark	prefers-color-scheme: dark
light	prefers-color-scheme: light
reducedMotion	prefers-reduced-motion: reduce
highContrast	prefers-contrast: more
lowContrast	prefers-contrast: less
noHover	hover: none (touch / stylus devices)
coarsePointer	pointer: coarse (finger-sized input)
forcedColors	forced-colors: active (Windows HCM)
print	print media type

import { createResponsiveState, AccessibilityPreset } from 'responsive-media'

const a11y = createResponsiveState(AccessibilityPreset)

a11y.onEnter('dark', () => applyDarkTheme())
a11y.onEnter('reducedMotion', () => disableAnimations())
a11y.onEnter('print', () => hideNonPrintable())