- 入门
- 核心概念
- 定制
- Base Styles
- 布局
- Flexbox & Grid
- Flex Basis
- Flex Direction
- Flex Wrap
- Flex
- Flex Grow
- Flex Shrink
- Order
- Grid Template Columns
- Grid Column Start / End
- Grid Template Rows
- Grid Row Start / End
- Grid Auto Flow
- Grid Auto Columns
- Grid Auto Rows
- Gap
- Justify Content
- Justify Items
- Justify Self
- Align Content
- Align Items
- Align Self
- Place Content
- Place Items
- Place Self
- 间隔
- 尺寸
- 排版
- Font Family
- Font Size
- Font Smoothing
- Font Style
- Font Weight
- Font Variant Numeric
- Letter Spacing
- Line Clamp
- Line Height
- List Style Image
- List Style Position
- List Style Type
- Text Align
- Text Color
- Text Decoration
- Text Decoration Color
- Text Decoration Style
- Text Decoration Thickness
- Text Underline Offset
- Text Transform
- Text Overflow
- Text Wrap
- Text Indent
- Vertical Align
- Whitespace
- Word Break
- Hyphens
- Content
- 背景
- 边框
- Effects
- Filters
- 表格 Tables
- Transitions & Animation
- Transforms
- Interactivity
- SVG
- Accessibility
- 其他
- Install Tailwind CSS using PostCSS
- Framework Guides
- Try Tailwind CSS using the Play CDN
- Install Tailwind CSS with Next.js
- Install Tailwind CSS with Laravel
- Install Tailwind CSS with Vite
- Install Tailwind CSS with Nuxt
- Install Tailwind CSS with Gatsby
- Install Tailwind CSS with SolidJS
- Install Tailwind CSS with SvelteKit
- Install Tailwind CSS with Angular
- Install Tailwind CSS with Ruby on Rails
- Install Tailwind CSS with Remix
- Install Tailwind CSS with Phoenix
- Install Tailwind CSS with Parcel
- Install Tailwind CSS with Symfony
- Install Tailwind CSS with Meteor
- Install Tailwind CSS with Create React App
- Install Tailwind CSS with Adonis
- Install Tailwind CSS With Ember.js
- Install Tailwind CSS with Astro
- Install Tailwind CSS with Qwik
- Install Tailwind CSS with Rspack
Screen Readers
Utilities for improving accessibility with screen readers.
Quick reference
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; |
Basic usage
Screen-reader-only elements
Use 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
Use 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>
Applying conditionally
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>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论