sr-only is one of the highest-frequency classes in real Nakshora codebases. sr-only speaks to screen readers while staying invisible — skip links, labels, status.

What it compiles to#

css
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0 }

Ten ways to use it#

  • Open any recipe in the recipes/index|recipe library and you will find sr-only doing structural work
  • Combine with responsive prefixes for breakpoint behavior
  • Pair with state variants (hover:, focus:) for interactivity
  • Use in components extracted in your framework of choice
  • Audit existing projects: search for hand-written equivalents and replace them
  • Teach your team the class — it appears in most code reviews
  • Compose it with spacing/color utilities for complete patterns
  • Test it in the playground before committing
  • Check dark mode: add the dark: twin where color is involved
  • Bookmark its reference page — the generated table never lies

Common mistakes#

  • Applying it on the wrong display type (some utilities only make sense on flex/grid/block)
  • Stacking a conflicting utility of the same property later in the cascade
  • Expecting layout utilities to affect inline elements without a display change
  • Forgetting responsive prefixes, hard-coding desktop assumptions

spotlight/index|Spotlight index · utilities/index|Utilities reference