sr-only to hide an element visually without hiding it from screen readers:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span> </a>
Undoing screen-reader-only elements
not-sr-only to undo
sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span> </a>
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use
focus:not-sr-only to only apply the
not-sr-only utility on focus.
<a href="#content" class="sr-only focus:not-sr-only"> Skip to content </a>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:not-sr-only to apply the
not-sr-only utility at only medium screen sizes and above.
<div class="sr-only md:not-sr-only"> <!-- ... --> </div>