um

CSS

Small screens and access

What the CSS does for touch, phones, reduced motion, forced colours and keyboard focus.

Every component is built to be used on a phone, by keyboard and with assistive settings. It's handled in the CSS, so you get it without doing anything.

Touch and small screens

  • Targets. Where the pointer is coarse, controls are at least 44px tall, and icon-only buttons 44px wide.
  • No hover-only controls. Anything revealed on hover, such as a copy button or a message's actions, is always shown on a device that can't hover, and reachable by focus everywhere.
  • Overlays come from the bottom. Below Tailwind's sm breakpoint, dialogs, drawers, menus and popovers become full-width sheets along the bottom edge.
  • Tables stack. Below sm, each row of a table_for becomes a list of its cells, labelled from the head.
  • Rows scroll, they don't wrap. Tabs, toolbars and chips stay on one line that scrolls sideways.
  • Headers wrap. A page header's or section's actions drop below the title.

Motion

Transitions are short (100 to 200ms). Under prefers-reduced-motion: reduce, anything that moves, scales, rotates or scrolls smoothly stops. An indicator that would otherwise look frozen, such as a spinner, fades in and out instead.

Focus

Everything focusable shows a 2px outline, offset from the element, on :focus-visible: shown for the keyboard and not for a mouse click.

Forced colours

Where the CSS draws something the platform normally draws, such as a checkbox's tick or a select's arrow, a forced-colors: active fallback hands it back to system colours, so it stays visible in Windows High Contrast mode.

Your app's global styles

The components guard against the bare-element rules an app most often has, such as margins on links in a <nav> and type styles in content shown in the top layer. Styling bare elements broadly (a { … }, button { … }) can still leak into a component. Scope those rules to your own content where you can.

See it working