屏幕阅读器 - Tailwind CSS

Class	Properties
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;
not-sr-only	position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

基础用法

使用 sr-only 在视觉上隐藏元素，但不向屏幕阅读器隐藏它：

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

使用 not-sr-only 撤消 sr-only，使元素对视力正常的用户和屏幕阅读器都可见。当您想在小屏幕上隐藏某些内容但在大屏幕上显示时，此功能非常有用，例如：

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 focus:not-sr-only 来仅在 focus应用 not-sr-only.

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

详细了解, 请参考 Hover, Focus, & Other States 文档.

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:not-sr-only 来应用 not-sr-only 程序，适用于中等屏幕尺寸及以上。

<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>